/* ─────────────────────────────────────────────────────────────────
   Trenner

   Der einzige Baustein ohne Inhalt. Seine Höhe ist sein Zweck -
   deshalb sind die Stufen deutlich verschieden: Zwischen 40 und 48
   Pixeln sieht niemand einen Unterschied, zwischen 32 und 96 schon.
   ───────────────────────────────────────────────────────────────── */

.lt-trenner{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  max-width:var(--wrap, 1200px);
  margin-inline:auto;
  padding-inline:var(--rand, 24px);
  box-sizing:border-box;
}

.lt-trenner--h-klein  {--th:32px}
.lt-trenner--h-mittel {--th:64px}
.lt-trenner--h-gross  {--th:112px}
.lt-trenner{height:var(--th, 64px)}

/* Symbolgröße: --tz ist der Kreis, das Zeichen darin gut die Hälfte.
   Ein großes Symbol in einem kleinen Abstand würde in die Nachbarn
   ragen - deshalb wächst der Trenner dann mit. */
.lt-trenner--s-klein {--tz:30px}
.lt-trenner--s-mittel{--tz:38px}
.lt-trenner--s-gross {--tz:54px}
.lt-trenner--s-xl    {--tz:72px}
.lt-trenner--zeichen{height:max(var(--th, 64px), calc(var(--tz, 38px) + 10px))}

/* ── Linie ────────────────────────────────────────────────────
   Sehr zurückhaltend: Sie soll gliedern, nicht unterteilen. Eine
   kräftige Linie zerschneidet die Seite in Kapitel, und das ist
   selten gemeint. */
.lt-trenner--linie > span{
  display:block;
  flex:1;
  height:1px;
  background:color-mix(in srgb, var(--text) 14%, transparent);
}

/* ── Zeichen in der Mitte ─────────────────────────────────────── */
.lt-trenner__strich{
  flex:1;
  height:1px;
  background:color-mix(in srgb, var(--text) 14%, transparent);
}
.lt-trenner__zeichen{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--tz, 38px);height:var(--tz, 38px);
  color:var(--akzent);
}
.lt-trenner__zeichen svg{width:calc(var(--tz, 38px) * .58);height:calc(var(--tz, 38px) * .58)}
/* Font Awesome: gefüllt wirkt es größer - deshalb etwas kleiner als
   die Strichzeichnung. */
.lt-trenner__zeichen i{font-size:calc(var(--tz, 38px) * .5);line-height:1}

/* ── Welle ────────────────────────────────────────────────────
   Über die volle Breite, ohne Rand - eine Welle mit Seitenabstand
   wäre keine.

   Die Höhe kommt aus der Stufe, die Zeichnung streckt sich mit:
   preserveAspectRatio="none" im Markup. */
.lt-trenner--welle{padding-inline:0;max-width:none}
.lt-trenner--welle svg{
  display:block;
  width:100%;height:100%;
  fill:var(--flaeche);
}

/* ── Den Baustein darunter färben ─────────────────────────────
   Der Nachbarselektor trifft genau EINEN Baustein: den direkt
   folgenden.

   Vorher spannte der Trenner eine Fläche von 100vh nach unten auf -
   das endete irgendwo mitten im Inhalt, je nach Fensterhöhe, und
   niemand konnte sehen, warum. Der Nachbarselektor sagt genau, was
   gemeint ist, und braucht keine Zahl.

   Der Trenner selbst färbt sich mit: Er gehört zu dem Abschnitt, den
   er einleitet - eine Farbe, die erst nach dem Abstand beginnt,
   sähe abgeschnitten aus. */

/* ── Farbkante genau auf der Linie ────────────────────────────
   Der Trenner färbt sich GAR NICHT - stattdessen sitzt die Linie an
   seinem unteren Rand, direkt an der Kante des gefärbten Bausteins.

   Der Verlauf-Ansatz von vorher rechnete mit 50 % der Trennerhöhe und
   traf die Linie nicht: Sobald irgendetwas die Höhe beeinflusst - ein
   Symbol, eine Media Query, eine geerbte Zeilenhöhe -, liegen Kante
   und Linie auseinander.

   Hier gibt es nichts zu rechnen: Die Linie IST der untere Rand, und
   der Baustein darunter beginnt genau dort. */
.lt-trenner[class*="--f-"]{background:none}

.lt-trenner--linie[class*="--f-"],
.lt-trenner--zeichen[class*="--f-"]{align-items:flex-end}

/* Damit die Linie nicht auf der Kante klebt, sondern auf ihr liegt:
   Sie ist ein Pixel hoch und sitzt genau am Rand. */
.lt-trenner--linie[class*="--f-"] > span,
.lt-trenner--zeichen[class*="--f-"] .lt-trenner__strich{margin-bottom:0}

/* Das Symbol ragt zur Hälfte in den gefärbten Bereich - so sitzt es
   auf der Kante und nicht darüber. */
.lt-trenner--zeichen[class*="--f-"] .lt-trenner__zeichen{
  margin-bottom:calc(var(--tz, 38px) / -2);
  position:relative;
  z-index:1;
}
/* Der Trenner selbst muss über dem folgenden Baustein liegen - sonst
   malt ein Baustein mit eigener Ebene (position:relative, Header,
   Speisekarte) seine Fläche über die untere Hälfte des Kreises. */
.lt-trenner--zeichen[class*="--f-"]{position:relative;z-index:3}

/* Die Farben gelten nur noch für den Baustein darunter. */
.lt-trenner--f-flaeche + *{background:var(--flaeche)}
.lt-trenner--f-akzent + *{
  background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-trenner--f-dunkel + *{background:#1b1f26;color:#f4f6f8}

/* Akzent kräftig: volle Hausfarbe, Schrift in der Farbe, die auch auf
   den Knöpfen steht (--auf-akzent, "Schriftfarbe auf Akzent" im
   Design) - damit ist es auf hellen wie dunklen Hausfarben lesbar.
   Dieselben Tokens wie die Fläche "Akzent voll", damit Bausteine,
   die sich danach richten, ohne Sonderregel mitziehen. */
.lt-trenner--f-akzent-voll + *{
  background:var(--akzent);
  color:var(--auf-akzent,#fff);
  --auf-flaeche-grund:   var(--akzent);
  --auf-flaeche-stark:   var(--auf-akzent,#fff);
  --auf-flaeche-schwach: color-mix(in srgb, var(--auf-akzent,#fff) 75%, transparent);
  --auf-flaeche-linie:   color-mix(in srgb, var(--auf-akzent,#fff) 28%, transparent);
  --auf-flaeche-akzent:  var(--auf-akzent,#fff);
  --auf-flaeche-marke:      var(--auf-akzent,#fff);
  --auf-flaeche-marke-text: var(--akzent);
  --auf-flaeche-knopf:      var(--auf-akzent,#fff);
  --auf-flaeche-knopf-text: var(--akzent);
  --auf-flaeche-rand: color-mix(in srgb, var(--auf-akzent,#fff) 35%, transparent);
  --link:var(--auf-akzent,#fff);
}
.lt-trenner--f-akzent-voll + * :is(h1,h2,h3,h4,h5,h6,p,li,blockquote,figcaption,strong,em){color:inherit}
.lt-trenner--f-akzent-voll + * a:not(.lt-btn){color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Knöpfe umgedreht: Ein Akzentknopf auf Akzentfläche wäre unsichtbar. */
.lt-trenner--f-akzent-voll + * .lt-btn:not(.lt-btn--linie){
  background:var(--auf-akzent,#fff);color:var(--akzent);
  box-shadow:0 2px 4px rgba(15,20,28,.12),0 8px 20px rgba(15,20,28,.18)}
.lt-trenner--f-akzent-voll + * .lt-btn:not(.lt-btn--linie):hover{
  background:color-mix(in srgb, var(--auf-akzent,#fff) 88%, var(--akzent))}
.lt-trenner--f-akzent-voll + * .lt-karte-el{
  background:color-mix(in srgb, var(--auf-akzent,#fff) 10%, transparent);
  border-color:color-mix(in srgb, var(--auf-akzent,#fff) 30%, transparent)}

.lt-trenner--f-dunkel + * :is(h1,h2,h3,h4,h5,h6){color:#fff}
.lt-trenner--f-dunkel + * .lt-karte-el{
  background:rgba(255,255,255,.05);
  border-color:color-mix(in srgb, var(--akzent) 45%, transparent);
}

/* Beim Symbol auf dunklem Grund: Der Kreis dahinter muss die Farbe
   des Bausteins tragen, sonst schwebt das Zeichen über der Kante. */
.lt-trenner--zeichen.lt-trenner--f-flaeche .lt-trenner__zeichen{
  background:var(--flaeche);border-radius:50%}
.lt-trenner--zeichen.lt-trenner--f-akzent .lt-trenner__zeichen{
  background:color-mix(in srgb, var(--akzent) 10%, transparent);
  border-radius:50%}
.lt-trenner--zeichen.lt-trenner--f-dunkel .lt-trenner__zeichen{
  background:#1b1f26;border-radius:50%}
.lt-trenner--zeichen.lt-trenner--f-akzent-voll .lt-trenner__zeichen{
  background:var(--akzent);color:var(--auf-akzent,#fff);border-radius:50%;
}
/* Feiner Ring in der Schriftfarbe (halb deckend), ganz herum. Als
   Schatten statt Rahmen: Der Kreis wächst nicht und sitzt weiter genau
   auf der Kante; ein Halbpixel-Rahmen zerfiel zudem in Punkte. */
.lt-trenner--zeichen.lt-trenner--f-akzent-voll .lt-trenner__zeichen::before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 .5px color-mix(in srgb, currentColor 50%, transparent)}

/* Die gefärbten Bereiche laufen über die volle Breite - eine Fläche
   mit Seitenrand wäre ein Kasten, kein Abschnitt. */
.lt-trenner--f-flaeche,
.lt-trenner--f-akzent,
.lt-trenner--f-akzent-voll,
.lt-trenner--f-dunkel{max-width:none;padding-inline:0}

/* Die Welle nimmt die Farbe des Bausteins darunter an - sie ist der
   Übergang dorthin. */
.lt-trenner--welle.lt-trenner--f-flaeche svg{fill:var(--flaeche)}
.lt-trenner--welle.lt-trenner--f-akzent svg{
  fill:color-mix(in srgb, var(--akzent) 10%, transparent)}
.lt-trenner--welle.lt-trenner--f-dunkel svg{fill:#1b1f26}
.lt-trenner--welle.lt-trenner--f-akzent-voll svg{fill:var(--akzent)}
/* Ohne Farbe füllt die Welle nichts - sonst steht ein grauer Bogen
   im Nichts. */
.lt-trenner--welle:not([class*="--f-"]) svg{fill:var(--flaeche)}

@media(max-width:760px){
  .lt-trenner--h-mittel{--th:44px}
  .lt-trenner--h-gross {--th:72px}
}