/*
Theme Name: Schulz Raster
Description: Schlichtes, modernes Block-Theme für stefan-schulz.eu: bildorientiertes Kartenraster, Systemschriften, Hell/Dunkel nach Systemeinstellung.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: schulz
*/

/* ---- Farben (hell/dunkel); theme.json verweist auf diese Variablen ---- */
:root{
  --s-bg:#f5f4f1; --s-card:#ffffff; --s-text:#1c1c1c; --s-muted:#66645f;
  --s-line:#e5e2dc; --s-accent:#910000; --s-on-accent:#ffffff;
  --s-radius:14px;
}
/* Dunkel: nach Systemeinstellung, außer die Besucherin hat per Schalter "Hell" gewählt ... */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --s-bg:#101113; --s-card:#1a1b1e; --s-text:#ececea; --s-muted:#a09e99;
    --s-line:#2a2c30; --s-accent:#ff7b6e; --s-on-accent:#1a0705;
  }
}
/* ... oder ausdrücklich "Dunkel" gewählt (gilt unabhängig vom System) */
:root[data-theme="dark"]{
  --s-bg:#101113; --s-card:#1a1b1e; --s-text:#ececea; --s-muted:#a09e99;
  --s-line:#2a2c30; --s-accent:#ff7b6e; --s-on-accent:#1a0705;
}
:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- Grundlagen ---- */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(a){text-underline-offset:.18em}
:where(a:focus-visible,button:focus-visible,input:focus-visible){outline:2px solid var(--s-accent);outline-offset:3px;border-radius:4px}
img{height:auto}
main{min-height:50vh}

/* ---- Kopfbereich ---- */
/* Der Weichzeichner liegt auf einem Pseudo-Element: ein backdrop-filter direkt an der Kopfzeile würde das
   Vollbild-Menü (position:fixed) auf die Höhe der Kopfzeile begrenzen. */
.s-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--s-line)}
.s-header::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--s-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Vollbild-Menü: Innenabstand, linksbündig, größere Touch-Flächen, scrollbar bei vielen Einträgen */
.s-header .wp-block-navigation__responsive-container.is-menu-open{padding:1.25rem 1.5rem 2rem;overflow-y:auto}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  --navigation-layout-justify:flex-start;--navigation-layout-align:flex-start;--navigation-layout-justification-setting:flex-start;
  align-items:flex-start;padding-top:3rem}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{align-items:flex-start;text-align:left;width:100%}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{align-items:flex-start}
.s-header .wp-block-navigation__responsive-container.is-menu-open a{color:inherit;font-size:1.15rem;padding:.7rem 0!important;border-radius:0;box-shadow:none;background:none}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{padding:0 0 .5rem 1rem!important}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{font-size:1rem;padding:.6rem 0!important;color:var(--s-muted)}
.s-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{top:1rem;right:1rem}
.admin-bar .s-header{top:var(--wp-admin--admin-bar--height,32px)}
.s-header .wp-block-site-title a{text-decoration:none;color:inherit}

/* ---- Schrift des Site-Titels: Instrument Serif (nur der Titel; Überschriften bleiben in der System-Sans) ----
   Selbst gehostet (fonts/instrument-serif.woff2), SIL Open Font License. Nur ein Schnitt (400). */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format('woff2')}
.s-header .wp-block-site-title{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400;
  letter-spacing:0;font-size:2.05rem;line-height:1.1}
.s-header .wp-block-navigation a{text-decoration:none;color:var(--s-muted);padding:.35rem .8rem;border-radius:99px}
.s-header .wp-block-navigation a:hover,
.s-header .wp-block-navigation .current-menu-item>a{background:var(--s-card);color:var(--s-text);box-shadow:0 0 0 1px var(--s-line)}
.s-header .wp-block-navigation__submenu-container{background:var(--s-card);border:1px solid var(--s-line);border-radius:12px;padding:.4rem}

/* ---- Farbschema-Schalter (System / Hell / Dunkel); ohne JavaScript ausgeblendet ---- */
.s-theme{display:none;gap:2px;padding:3px;border:1px solid var(--s-line);border-radius:99px;background:var(--s-card)}
.s-js .s-theme{display:inline-flex}
.s-theme button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--s-muted);cursor:pointer;font:inherit}
.s-theme button:hover{color:var(--s-text)}
.s-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* aktiver Zustand allein aus dem html-Attribut, damit beim Laden nichts umspringt */
:root:not([data-theme]) .s-theme [data-mode="system"],
:root[data-theme="light"] .s-theme [data-mode="light"],
:root[data-theme="dark"] .s-theme [data-mode="dark"]{background:var(--s-accent);color:var(--s-on-accent)}

/* Mittlere Breiten (Telefon im Querformat, kleines Tablet): Core zeigt die volle Navigation schon ab 600 px,
   sie passt aber erst ab etwa 900 px in eine Zeile. Bis dahin bleibt das Burger-Menü. */
.s-header .wp-block-site-title{white-space:nowrap}
.s-header .wp-block-site-title a{display:inline-block}
@media (min-width:600px) and (max-width:899px){
  .s-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .s-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
/* Niedrige Fenster (Telefon im Querformat): die Kopfzeile läuft mit dem Inhalt mit, statt Platz zu belegen */
@media (max-height:500px){
  .s-header{position:static}
}

/* Sehr schmale Telefone (320 bis 380 px): Titel bleibt einzeilig, Schalter und Ränder etwas kleiner.
   Die Schriftgrößen-Klasse von WordPress ist !important, deshalb hier auch. */
@media (max-width:380px){
  .s-header>.wp-block-group{padding-left:1rem!important;padding-right:1rem!important}
  .s-header .wp-block-site-title{font-size:1.45rem;white-space:nowrap}
  .s-theme button{width:28px;height:28px}
  .s-theme svg{width:16px;height:16px}
}

/* ---- Einleitung und Kategorie-Chips ---- */
/* Überschrift und Untertitel der Startseite stehen im Template-Teil "home-intro" (eigene Abstände nötig) */
.s-lead{margin:0 0 .4rem}
.s-sub{margin:1.2rem 0 0;color:var(--s-muted)}
.s-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.s-chips li{margin:0}
/* Abstand zum Untertitel (höhere Spezifität, damit das Layout-CSS des Containers nicht gewinnt) */
main .s-chips{margin-top:1.75rem}
.s-chips a{display:inline-block;font-size:.82rem;font-weight:600;text-decoration:none;color:var(--s-text);
  padding:.28rem .8rem;border-radius:99px;border:1px solid var(--s-line);background:var(--s-card)}
.s-chips a:hover,.s-chips .current-cat>a{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-on-accent)}

/* Hellen Hintergründen aus Beiträgen (Verlauf/Farbe der Core-Palette ohne eigene Textfarbe) immer dunkle Schrift geben,
   sonst erbt der Text im Dunkelmodus die helle Seitenfarbe (z. B. Absatz im Beitrag "Ironfist"). */
.has-very-light-gray-to-cyan-bluish-gray-gradient-background:not(.has-text-color),
.has-very-light-gray-background-color:not(.has-text-color),
.has-white-background-color:not(.has-text-color),
.has-light-green-cyan-background-color:not(.has-text-color),
.has-pale-pink-background-color:not(.has-text-color),
.has-luminous-vivid-amber-background-color:not(.has-text-color),
.has-cyan-bluish-gray-background-color:not(.has-text-color){color:#1b1b1b}

/* Gefloatetes Bild und der Text daneben beginnen auf gleicher Höhe: Der folgende Absatz bekommt vom Layout einen
   Blockabstand nach oben (1,2 rem), das Bild nicht. Das Bild erhält daher denselben Abstand, auch als erstes Element
   (sonst klebt der Beitragsanfang am Titel). Höhere Spezifität, damit die Null-Regel für :first-child nicht gewinnt. */
.wp-block-post-content.entry-content > .alignleft,
.wp-block-post-content.entry-content > .alignright{margin-block-start:1.2rem}

/* ---- Kartenraster ---- */
/* Abstand über dem Raster per CSS, nicht als style-Attribut am Query-Block: Der Website-Editor verwirft sonst das
   Raster-Layout des Kachel-Blocks beim Laden (Raster wird zur Liste). */
.s-grid:not(:first-child){margin-top:2rem}
.s-grid .wp-block-post-template{gap:1.4rem}
.s-card{position:relative;background:var(--s-card);border-radius:var(--s-radius);overflow:hidden;box-shadow:0 0 0 1px var(--s-line);
  height:100%;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.s-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--s-accent),0 10px 24px rgba(0,0,0,.08)}
.s-card .wp-block-post-featured-image{margin:0}
.s-card .wp-block-post-featured-image img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.s-card__body{padding:1rem 1.15rem 1.2rem}
.s-card .wp-block-post-terms{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.s-card .wp-block-post-terms a{color:var(--s-accent);text-decoration:none}
.s-card .wp-block-post-title{margin:.35rem 0 .5rem;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}
.s-card .wp-block-post-title a{color:inherit;text-decoration:none}
.s-card .wp-block-post-title a::after{content:"";position:absolute;inset:0}/* ganze Karte klickbar */
.s-card .wp-block-post-date{font-size:.82rem;color:var(--s-muted)}
.s-card .wp-block-post-excerpt{display:none}

/* Beiträge ohne Bild: getönte Fläche im Bildformat mit Symbol je Kategorie.
   Die Kategorie kommt aus den Klassen, die WordPress an jeden Beitrag (li) setzt. */
.wp-block-post:not(:has(.wp-block-post-featured-image)) .s-card::before{
  content:"";display:block;aspect-ratio:4/3;
  background:color-mix(in srgb,var(--s-accent) 9%,var(--s-card))}
.wp-block-post:not(:has(.wp-block-post-featured-image)) .s-card::after{
  content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:4/3;pointer-events:none;
  background:var(--s-accent);opacity:.75;
  -webkit-mask:var(--s-icon) center/26% no-repeat;mask:var(--s-icon) center/26% no-repeat}
.wp-block-post{
  /* Standard: Dokument */
  --s-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.wp-block-post.category-literature{
  --s-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H19v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H19v-3'/%3E%3Cpath d='M8 7h7M8 10h5'/%3E%3C/svg%3E")}
.wp-block-post.category-music{
  --s-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E")}
.wp-block-post.category-tv{
  --s-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='12' rx='2'/%3E%3Cpath d='M8 3l4 4 4-4'/%3E%3C/svg%3E")}
/* Aufmacher ohne Bild: Fläche in der Breite des Bildes */
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child:not(:has(.wp-block-post-featured-image)) .s-card::before{width:55%;aspect-ratio:auto;min-height:280px}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child:not(:has(.wp-block-post-featured-image)) .s-card::after{right:auto;width:55%;aspect-ratio:auto;height:100%}
@media (max-width:600px){
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child:not(:has(.wp-block-post-featured-image)) .s-card::before{width:100%;aspect-ratio:4/3;min-height:0}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child:not(:has(.wp-block-post-featured-image)) .s-card::after{right:0;width:auto;aspect-ratio:4/3;height:auto}
}

/* erster Beitrag als Aufmacher */
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child{grid-column:span 2}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .s-card{flex-direction:row}
/* Bild füllt die Fläche und wird beschnitten: die Zeilenhöhe hängt nie vom Seitenverhältnis des Bildes ab */
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-featured-image{position:relative;width:55%;min-height:280px}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-featured-image img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .s-card__body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:1.8rem}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-title{font-size:1.7rem;letter-spacing:-.025em}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-excerpt{display:block;color:var(--s-muted);font-size:.95rem}
body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-excerpt p{margin:0 0 .8rem}

@media (max-width:900px){
  .s-grid .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:600px){
  .s-grid .wp-block-post-template{grid-template-columns:minmax(0,1fr)!important}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child{grid-column:auto}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .s-card{flex-direction:column}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-featured-image{position:static;width:100%;min-height:0}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .wp-block-post-featured-image img{position:static;width:100%;height:auto;aspect-ratio:4/3}
  body:not(.paged) .s-grid--featured .wp-block-post-template>li:first-child .s-card__body{padding:1rem 1.15rem 1.2rem}
}

/* ---- Zero Gallery: dichter, mobil zwei Spalten ---- */
.s-gallery .wp-block-post-template{gap:.8rem}
.s-gallery .s-card__body{padding:.6rem .8rem .8rem}
.s-gallery .wp-block-post-title{font-size:.9rem;margin:0}
@media (min-width:601px) and (max-width:900px){
  .s-gallery .wp-block-post-template{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:600px){
  .s-gallery .wp-block-post-template{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---- Beitrag ---- */
.s-post-meta{color:var(--s-muted);font-size:.9rem}
.s-post-meta a{color:var(--s-accent);text-decoration:none;font-weight:600}
.s-tags a{display:inline-block;margin:0 .35rem .35rem 0;padding:.15rem .6rem;border:1px solid var(--s-line);border-radius:99px;
  font-size:.82rem;color:var(--s-muted);text-decoration:none}

/* ---- Kommentare und Formulare ---- */
.wp-block-comments{margin-top:2.5rem}
.wp-block-comment-template{padding:0;list-style:none}
.wp-block-comment-template>li{padding:1rem 0;border-top:1px solid var(--s-line)}
.wp-block-comment-author-name{font-weight:700}
.wp-block-comment-date{font-size:.82rem;color:var(--s-muted)}
.wp-block-comment-date a{color:inherit;text-decoration:none}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,
.wp-block-search__input{width:100%;padding:.6rem .8rem;border:1px solid var(--s-line);border-radius:10px;background:var(--s-card);color:var(--s-text);font:inherit}
.wp-block-search__input{width:auto;flex:1}
.comment-form .submit,.wp-block-search__button{padding:.6rem 1.2rem;border:0;border-radius:99px;background:var(--s-accent);color:var(--s-on-accent);font-weight:600;cursor:pointer}

.s-tags .wp-block-post-terms__separator{display:none}

/* ---- Fußbereich ---- */
.s-footer{border-top:1px solid var(--s-line);color:var(--s-muted);font-size:.88rem}
.s-footer a{color:inherit}

/* ---- Pagination ---- */
.wp-block-query-pagination{gap:.4rem}
.wp-block-query-pagination a,.wp-block-query-pagination .page-numbers{padding:.3rem .8rem;border-radius:99px;border:1px solid var(--s-line);background:var(--s-card);text-decoration:none;color:var(--s-text)}
.wp-block-query-pagination .current{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-on-accent)}

@media (prefers-reduced-motion:reduce){.s-card{transition:none}.s-card:hover{transform:none}}