/*
Theme Name:   Arciva
Theme URI:    https://arciva.de
Description:  Schlankes Block-Theme fuer arciva.de. Die Gestaltung liegt in
              theme.json (Farben, Schriften, Abstaende, Breiten) und wirkt
              dadurch auf Website UND Editor gleichermassen. Hier stehen nur
              Sonderfaelle, die theme.json nicht ausdruecken kann.
Author:       MajuSoft
Version:      1.0.0
Requires at least: 6.6
Tested up to: 7.0
Text Domain:  arciva
*/

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️ Sparsam halten. Jede Regel hier ist eine Regel, die der Editor NICHT
   von selbst kennt und die auseinanderlaufen kann. Alles, was in theme.json
   ausdrueckbar ist, gehoert dorthin — nicht hierher.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sprachumschalter ──────────────────────────────────────────────────────
   Polylang liefert eine <ul>. Ohne Zutun steht sie untereinander mit
   Aufzählungspunkten. Waagerecht und ohne Punkte — mehr braucht sie nicht. */
.wp-block-polylang-language-switcher{
  display:flex; gap:1rem; list-style:none; margin:0; padding:0;
  font-size:var(--wp--preset--font-size--klein);
}
.wp-block-polylang-language-switcher li{margin:0}
.wp-block-polylang-language-switcher .current-lang > a{
  color:var(--wp--preset--color--text); font-weight:600;
}

/* ── Aufzählung im Kopfbereich ─────────────────────────────────────────────
   Die Schritte sind eine geordnete Liste (nativ, im Editor bearbeitbar).
   Die Ziffern sollen zurücktreten und ausgerichtet stehen, statt als
   Standard-Nummerierung zu dominieren. */
.schritte{list-style:none; padding:0; counter-reset:schritt}
.schritte > li{
  counter-increment:schritt; position:relative; padding-left:2.6rem;
}
.schritte > li::before{
  content:counter(schritt,decimal-leading-zero);
  position:absolute; left:0; top:0.1em;
  font-family:var(--wp--preset--font-family--mono);
  font-size:0.78rem; color:var(--wp--preset--color--text-still);
  font-variant-numeric:tabular-nums;
}
.schritte > li:last-child{color:var(--wp--preset--color--text); font-weight:550}

/* ── Karten ────────────────────────────────────────────────────────────────
   ⚠️ Wichtig fuers Verstaendnis: Diese Gestaltung steht HIER und nicht in den
   Block-Eigenschaften. Gutenberg vergleicht beim Oeffnen das gespeicherte
   HTML mit dem, was der Block aus seinen Eigenschaften selbst erzeugen wuerde
   — jede Abweichung meldet er als „unerwarteter oder ungueltiger Inhalt".
   Von Hand geschriebenes Markup trifft diese Serialisierung nie exakt.
   Deshalb: Bloecke tragen nur einen Klassennamen, die Gestaltung liegt im
   Theme. Nebeneffekt, der uns entgegenkommt — sie liegt damit an EINER
   Stelle und wirkt in Editor und Website gleichermassen. */
.karte{
  background:var(--wp--preset--color--flaeche);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:14px;
  padding:var(--wp--preset--spacing--20);
}
.karte > * + *{margin-block-start:0.35rem}
.karte--erledigt{border-color:var(--wp--preset--color--erledigt)}

/* Schlagwort ueber dem Kartentitel */
.schlagwort{
  text-transform:uppercase; letter-spacing:0.1em; font-weight:650;
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--akzent);
}
.schlagwort--stumm{color:var(--wp--preset--color--text-still)}

/* ── Zweistufige Aufkleber-Struktur ───────────────────────────────────────
   Abschnitt "Aufkleber statt Ordner". Der Vorteil gegenueber Ordnern ist die
   HIERARCHIE: Der Oberaufkleber findet den Vorgang mit, ohne dass man ihn je
   vergeben hat. Die erste Fassung zeigte Chip + Ueberschrift — das las sich
   als zwei gleichrangige Etiketten, und damit war genau die Pointe weg
   (Rueckmeldung des Entwicklers, 2026-08-10).

   Die Stufe wird deshalb GEZEICHNET: Einrueckung plus Winkel wie in einer
   Baumansicht. Bewusst KEIN Codeblock mit Kaestchenzeichen — der braucht eine
   Monospace-Schrift, bricht auf schmalen Fenstern um und liest sich auf einer
   Verkaufsseite wie ein Terminal. Der Winkel kommt aus zwei Rahmenkanten und
   skaliert mit der Schriftgroesse mit. */
.baum-eltern{font-weight:650; margin:0}
.baum-kind{
  position:relative; margin:0.2rem 0 0; padding-left:1.75rem;
  font-weight:650; color:var(--wp--preset--color--akzent);
}
.baum-kind::before{
  content:""; position:absolute; left:0.4rem; top:-0.6em; bottom:0.62em;
  width:0.8rem;
  border-left:2px solid var(--wp--preset--color--linie);
  border-bottom:2px solid var(--wp--preset--color--linie);
  border-bottom-left-radius:5px;
}
/* Der Erklaersatz braucht Abstand zum Baum, den WordPress hier nicht setzt. */
.baum-kind + p{margin-block-start:var(--wp--preset--spacing--10)}
.schlagwort--arbeit{color:var(--wp--preset--color--arbeit)}
.schlagwort--erledigt{color:var(--wp--preset--color--erledigt)}
.karte-titel{font-weight:600; color:var(--wp--preset--color--text)}
.karte-zeile{font-size:var(--wp--preset--font-size--klein); color:var(--wp--preset--color--text-still)}

/* ── Kopfbereich ───────────────────────────────────────────────────────────
   Semantische Klassen statt Block-Eigenschaften — siehe Hinweis bei .karte.
   Alle Werte kommen aus theme.json, hier wird nur zugeordnet. */
.kopfbereich{
  padding-block:var(--wp--preset--spacing--60);
}
.titel-akzent{color:var(--wp--preset--color--akzent)}
.betont{font-weight:600; color:var(--wp--preset--color--text)}
.leise{font-size:var(--wp--preset--font-size--klein); color:var(--wp--preset--color--text-still)}

/* Fusszeile: die Rechtslinks kommen aus dem Shortcode
   [arciva_rechtslinks] und sind damit kein Absatz-Block mehr — die
   Zentrierung muss deshalb hier stehen, nicht als Block-Eigenschaft. */
.rechtszeile{text-align:center}
.bildunterschrift{
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--text-still); text-align:center;
}
/* Die Karten der Zeitachse stehen enger beieinander als der uebrige Fliesstext */
.zeitachse > * + *{margin-block-start:var(--wp--preset--spacing--10)}

/* Trennlinien im Kopfbereich gehen ueber die volle Spaltenbreite. Die
   Standardform waere kurz und mittig — als Gliederung zwischen Absaetzen
   wirkt eine durchgehende Linie ruhiger. */
.kopfbereich .wp-block-separator{
  width:100%; max-width:none; border:0;
  border-top:1px solid var(--wp--preset--color--linie); opacity:1;
}

/* ⚠️ Karten NICHT als „eingeschraenkte" Gruppe anlegen (layout constrained).
   Das begrenzt Inhalte auf Textbreite und richtet sie mittig aus — innerhalb
   einer schmalen Karte sinnlos, und im Editor fuehrte es dazu, dass der linke
   Innenabstand fehlte (2026-07-26). Auf der Website fiel es nicht auf.
   Eingeschraenktes Layout gehoert an Seitenabschnitte, nicht an Karten. */

/* ── Auslöser-Karte und Verbindungslinie ───────────────────────────────────
   Die erste Karte ist der Ausloeser, noch kein Schritt im Vorgang: gestrichelt
   und ohne Fuellung. Darunter die Notiz, die den ZWEITEN Einstiegsweg nennt
   (Datei hineinziehen) — beim Neubau am 2026-07-26 versehentlich verloren
   gegangen und wieder eingesetzt. Die Zeile ist inhaltlich wichtig, nicht
   Zierde. */
.karte--ausloeser{
  background:transparent;
  border-style:dashed;
}
.ausloeser-notiz{
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--text-still);
  margin-inline-start:var(--wp--preset--spacing--20);
}

/* Senkrechte Linie hinter den Karten — macht aus einer Kartenreihe einen
   Ablauf. Rein dekorativ, deshalb ein Pseudo-Element statt Markup. */
.zeitachse{position:relative}
/* Die Linie braucht eine eigene Spur. Ohne Icons gab es keine, und sie lief
   quer durch den Text (2026-07-26). Die Karten bekommen deshalb links eine
   Rinne, in der die Linie laeuft — dieselbe Stelle, an der frueher die Icons
   sassen. */
.zeitachse .karte{padding-left:2.9rem}
.zeitachse .ausloeser-notiz{margin-inline-start:2.9rem}
.zeitachse::before{
  content:""; position:absolute; left:1.45rem; top:2.2rem; bottom:4.5rem;
  width:2px; border-radius:2px;
  background:linear-gradient(to bottom,
    var(--wp--preset--color--linie),
    var(--wp--preset--color--akzent) 18%,
    var(--wp--preset--color--erledigt) 94%);
  opacity:.45; pointer-events:none; z-index:0;
}
.zeitachse > *{position:relative; z-index:1}

/* ══ Seitenabschnitte ══════════════════════════════════════════════════════
   Ein Abschnitt ist die groesste Einheit der Seite. Nur HIER ist
   eingeschraenktes Layout richtig (siehe Hinweis bei den Karten). */
.abschnitt{padding-block:var(--wp--preset--spacing--50)}
.band{
  background:var(--wp--preset--color--flaeche);
  border-block:1px solid var(--wp--preset--color--linie);
  padding-block:var(--wp--preset--spacing--50);
}
.augenbraue{
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--wp--preset--color--text-still);
}
.lede{
  font-size:var(--wp--preset--font-size--gross);
  color:var(--wp--preset--color--text-weich); max-width:56ch;
}

/* ── Argument-Karten ───────────────────────────────────────────────────────
   Drei Spalten ab Tablet. CSS-Raster statt Spalten-Block: Der Spalten-Block
   braucht pro Zelle einen eigenen Block, das Raster verteilt die Kinder von
   selbst — weniger Verschachtelung im Editor, gleiche Bearbeitbarkeit. */
.kartenraster{display:grid; gap:1.25rem; grid-template-columns:1fr}
@media (min-width:700px){.kartenraster{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.kartenraster{grid-template-columns:repeat(3,1fr)}}

/* Zwei-Karten-Variante (Abschnitt "Aufkleber statt Ordner").
   Das Grundraster ist dreispaltig; zwei Karten liessen darin eine leere
   dritte Spalte stehen und saessen sichtbar linkslastig. Diese Variante
   nimmt die Breite einer Karte zurueck und zentriert das Paar, statt es
   auf 3/3 zu strecken -- gestreckte Karten wirken neben den sechs
   schmaleren des Abschnitts darueber wie ein anderes Bauteil. */
@media (min-width:1000px){
  .kartenraster--zwei{grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center}
}
.arg-karte{
  background:var(--wp--preset--color--flaeche);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:14px; padding:1.5rem;
}
.arg-karte > * + *{margin-block-start:0.6rem}

/* ── Such-Attrappe ─────────────────────────────────────────────────────────
   Aus Standard-Bloecken statt HTML, damit sie im Editor existiert. */
.suche{
  background:var(--wp--preset--color--flaeche);
  border:1px solid var(--wp--preset--color--linie);
  border-radius:18px; overflow:hidden;
}
.suche-leiste{
  background:var(--wp--preset--color--flaeche-2);
  border-bottom:1px solid var(--wp--preset--color--linie);
  padding:0.9rem 1.15rem; font-weight:600;
}
.suche-leiste::before{content:"🔍"; margin-right:0.55rem; opacity:.5}
.treffer{
  padding:0.95rem 1.15rem; border-bottom:1px solid var(--wp--preset--color--linie);
}
.treffer:last-child{border-bottom:0}
.treffer > * + *{margin-block-start:0.15rem}
.treffer-titel{font-weight:600; color:var(--wp--preset--color--text)}
.treffer-zeile{font-size:var(--wp--preset--font-size--klein); color:var(--wp--preset--color--text-still)}
.treffer-zahl{
  font-size:var(--wp--preset--font-size--klein); font-weight:650;
  color:var(--wp--preset--color--akzent);
}

/* ── Platzhalter fuer Screenshots ──────────────────────────────────────────
   Sichtbar als Platzhalter gestaltet — eine leere Flaeche wirkt wie ein
   Ladefehler. Fliegt raus, sobald echte Bilder da sind. */
/* ── Screenshot-Kacheln ───────────────────────────────────────────────────
   Loesen die Platzhalter ab (2026-08-11). Die Bilder sind HELL (Entscheidung
   vom 2026-08-10) und wuerden auf dem fast weissen Hintergrund ohne Fassung
   zerfliessen — deshalb dieselbe Umrandung wie bei den Karten.

   ⚠️ KEINE feste Hoehe, kein object-fit. Erste Fassung deckelte auf 230 px
   mit "cover" — das schnitt beim Vorgangs-Bild unten die DOKUMENTENLISTE weg,
   also genau das, was die Bildunterschrift verspricht (vom Entwickler am
   2026-08-11 bemerkt). Die drei Aufnahmen haben verschiedene Seitenverhaeltnisse:
   Aufkleber und Scan sind 2420x1618 (breit), der Vorgang 1835x1620 (hoch, weil
   dort die Seitenleiste weggeschnitten ist). Ein gemeinsames Format kann es
   deshalb nur geben, indem man etwas wegschneidet.

   Stattdessen behaelt jedes Bild sein Verhaeltnis, und die Kachel ist eine
   Flex-Spalte: Die Bildunterschrift wird mit margin-block-start:auto nach
   unten gedrueckt. Damit stehen die drei Unterschriften trotz verschieden
   hoher Bilder auf einer Linie — die Ausrichtung kommt zurueck, ohne dass ein
   Bild dafuer beschnitten wird. */
.bildkachel{display:flex; flex-direction:column; height:100%; margin:0}
.bildkachel img{
  width:100%; height:auto; display:block;
  border:1px solid var(--wp--preset--color--linie); border-radius:14px;
  background:var(--wp--preset--color--flaeche);
}
.bildkachel figcaption{
  margin-block-start:auto; padding-block-start:0.7rem; text-align:left;
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--text-still);
}

/* ── Galerie: Bildunterschriften UNTER das Bild, nicht darauf ──────────────
   Die drei Screenshots liegen in einem core/gallery-Block, weil WordPress die
   Blaetter-Knoepfe der Lightbox nur dort einblendet. Die Galerie legt
   Bildunterschriften aber als Ueberlagerung ins Bild: position:absolute,
   schwarzer Verlauf, weisse Schrift, zentriert. Auf hellen Screenshots ist
   das unlesbar (vom Entwickler am 2026-08-14 bemaengelt).

   Hier wird das zurueckgeholt. Die Auswahl ist bewusst so spezifisch wie die
   von WordPress — eine kuerzere Regel verliert im Kaskadenvergleich.

   ⚠️ Der untere Aussenabstand der figure gehoert dazu: WordPress reserviert
   dort Platz fuer die ueberlagerte Unterschrift (gemessen 76 px). Steht die
   Unterschrift wieder im Fluss, ist der Platz doppelt.

   ⚠️ Das fuehrende .abschnitt ist kein Zierrat. Ohne es haetten beide Regeln
   GENAU DIESELBE Spezifitaet (vier Klassen, zwei Elemente) — dann entscheidet
   allein die Ladereihenfolge der Stylesheets, und die haengt an WordPress.
   Heute gewinnt unsere Regel; mit einer zusaetzlichen Klasse gewinnt sie auch
   morgen. */
.abschnitt .kartenraster.wp-block-gallery figure.wp-block-image{margin-bottom:0}
.abschnitt .kartenraster.wp-block-gallery figure.wp-block-image figcaption{
  position:static; background:none; padding:0; margin:0;
  margin-block-start:auto; padding-block-start:0.7rem;
  text-align:left; max-width:none; flex-grow:0;
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--text-still);

  /* ⚠️ DAS ist der Grund, warum die Unterschriften verwaschen aussahen:
     WordPress setzt text-shadow:0 0 1.5px #000 — sinnvoll, solange der Text
     WEISS auf einem beliebigen Foto liegt, aber ein schwarzer Schleier um
     jeden Buchstaben, sobald er dunkelgrau auf Weiss steht. Am 2026-08-15
     gemessen, nachdem der Entwickler die Unschaerfe bemerkt hatte.

     will-change:transform kommt aus derselben Ecke. Es erzwingt eine eigene
     Compositing-Ebene; auf manchen Grafikkarten wird Text darin unschaerfer
     gerastert. Ohne Animation bringt es hier ohnehin nichts. */
  text-shadow:none;
  will-change:auto;

  /* ⚠️ Und der Grund, warum danach die ZWEITE ZEILE fehlte: WordPress deckelt
     die Unterschrift auf max-height:100% — also auf die Hoehe des Bildes — und
     macht den Ueberhang mit overflow:auto scrollbar. In der Ueberlagerung ist
     das sinnvoll (die Unterschrift soll das Bild nicht ueberragen); unter dem
     Bild schneidet es jede zweite Zeile ab. Am 2026-08-15 gemessen. */
  max-height:none;
  overflow:visible;
}

/* WordPress legt ueber den unteren Rand der figure einen leeren Absolutkasten
   (::before, 42 px hoch) — die Buehne fuer die ueberlagerte Unterschrift. Da
   die Unterschrift jetzt im Fluss steht, hat er keine Aufgabe mehr und liegt
   nur noch ueber dem Bild. */
.abschnitt .kartenraster.wp-block-gallery figure.wp-block-image::before{content:none}

.platzhalter{
  border:1px dashed var(--wp--preset--color--linie); border-radius:14px;
  background:var(--wp--preset--color--flaeche-2); min-height:200px;
  display:grid; place-items:center; text-align:center; padding:1.25rem;
  color:var(--wp--preset--color--text-still);
  font-size:var(--wp--preset--font-size--klein);
}

/* ── Plattform-Tabelle (Standard-Tabellenblock) ────────────────────────────*/
.plattformen table{border-collapse:collapse; width:100%; font-size:0.95rem}
.plattformen th,.plattformen td{
  text-align:left; padding:0.75rem 0.9rem;
  border-bottom:1px solid var(--wp--preset--color--linie);
}
.plattformen th{
  font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--wp--preset--color--text-still); font-weight:650;
}
.plattformen td:first-child{font-weight:600}
.plattformen td:not(:first-child){text-align:center}

/* ── Fusszeile der Seite ───────────────────────────────────────────────────*/
.seiten-fuss{
  border-top:1px solid var(--wp--preset--color--linie);
  padding-block:var(--wp--preset--spacing--40);
  font-size:var(--wp--preset--font-size--klein);
  color:var(--wp--preset--color--text-still); text-align:center;
}

/* Karten einer Rasterzeile gleich hoch. Raster-Elemente dehnen sich zwar von
   selbst, aber die Bloecke bringen eigene Hoehenangaben mit — deshalb
   ausdruecklich. */
.kartenraster > *{height:100%}

/* WordPress legt Block-Geschwistern einen oberen Abstand an (> * + *). Im
   Raster verschiebt das alle Karten ausser der ersten nach unten. Der
   Zeilenabstand kommt hier von "gap". */
.kartenraster > * + *{margin-block-start:0}

/* ── Marke in der Kopfzeile ────────────────────────────────────────────────
   Zeichen und Wortmarke stehen als Paar nebeneinander und verlinken beide
   zur Startseite. */
/* ── Kopfzeile bleibt beim Scrollen stehen ────────────────────────────────
   Wunsch des Entwicklers vom 2026-08-14: Zeichen, Wortmarke und die
   Sprachwahl sollen erreichbar bleiben. Der Hintergrund ist bereits deckend
   (flaeche), sonst wuerde der Text darunter durchscheinen.

   z-index 20 reicht: Die Lightbox von WordPress legt sich mit einem weit
   hoeheren Wert darueber, das Vollbild wird also nicht angeschnitten. */
header.wp-block-template-part{position:sticky; top:0; z-index:20}

/* ⚠️ Auf schmalen Fenstern brechen Marke und Sprachwahl in zwei Zeilen um.
   Zusammen mit der groesseren Fassung ergab das 138 px = 17 % eines
   iPhone-Bildschirms, und zwar dauerhaft, weil die Leiste ja stehen bleibt
   (am 2026-08-14 bei 375x812 gemessen). Auf dem Telefon zaehlt jede Zeile,
   also dort schlanker.

   Das !important ist hier kein Schludrian: Die Groesse des Zeichens steht als
   INLINE-Stil im Blockmarkup (so speichert Gutenberg Bildmasse), und dagegen
   kommt eine Klassenregel sonst nicht an. */
@media (max-width:699px){
  header.wp-block-template-part > .wp-block-group{
    padding-top:0.6rem !important; padding-bottom:0.6rem !important;
  }
  header.wp-block-template-part .marke-zeichen img{
    width:30px !important; height:30px !important;
  }
  header.wp-block-template-part .wp-block-site-title{font-size:1.05rem !important}
}

/* ⚠️ Sprungziele muessen unter der Leiste anfangen, nicht darunter
   verschwinden. Heute gibt es keine, aber der naechste Anker waere sonst
   ein stiller Fehler. */
:target{scroll-margin-top:6.5rem}

.marke{align-items:center; gap:0.6rem}
.marke-zeichen{margin:0; line-height:0}
.marke-zeichen img{display:block; border-radius:7px}

/* Fahnen im Sprachumschalter: Polylang liefert sie als <img>. Ohne Zutun
   sitzen sie auf der Grundlinie und ziehen die Zeile auseinander. */
.wp-block-polylang-language-switcher li a{
  display:inline-flex; align-items:center; gap:0.4rem;
}
.wp-block-polylang-language-switcher img{
  display:block; width:16px; height:auto; border-radius:2px;
}

/* ── Hinweiskasten ────────────────────────────────────────────────────────────
   WIRD DERZEIT VON KEINER SEITE BENUTZT — und bleibt trotzdem. Entscheidung des
   Entwicklers vom 2026-08-14: Ein Banner kann nuetzlich werden, etwa „Die Beta
   laeuft" oder ein Hinweis zur Veroeffentlichung.

   Wer hier eines Tages toten Code aufraeumt: Das ist kein Versehen. Vor dem
   Entfernen fragen.

   Urspruenglich diente der Kasten Merkern auf den Rechtsseiten („noch zu
   ergaenzen"). Diese Verwendung ist entfallen — die Platzhalter sind gefuellt,
   und der letzte Merker stand faelschlich oeffentlich im Impressum. Merker
   gehoeren ins Repo, nicht auf die Seite; der Kasten ist ab jetzt fuer echte
   Nutzerhinweise da. */
.hinweiskasten{
  border-left:3px solid var(--wp--preset--color--arbeit);
  background:var(--wp--preset--color--arbeit-weich);
  padding:0.9rem 1.1rem; border-radius:0 10px 10px 0;
  font-size:var(--wp--preset--font-size--klein);
  /* Hier stand ein Rueckfall auf eine Farbe, die es in der Palette gar nicht
     gibt (sie heisst text-weich). Der erste Name griff nie, der Rueckfall trug
     die Regel allein. Jetzt direkt. */
  color:var(--wp--preset--color--text-weich);
}