/* ─────────────────────────────────────────────────────────────────
   Störer

   Eine Zeile, die auffällt - ohne den Rest der Seite zu übertönen.
   Deshalb schmal: Was hier steht, ist ein Hinweis, kein Abschnitt.
   ───────────────────────────────────────────────────────────────── */

/* Das Symbol steht ÜBER dem Text, nicht daneben.

   Nebeneinander konkurriert es mit der Zeile um denselben Blick -
   darüber führt es hin. Bei einem Störer ist das richtig: Er hat eine
   einzige Aussage, und das Zeichen kündigt sie an.

   Deshalb Spalte statt Zeile, und der Knopf rückt darunter. */
.lt-stoerer__innen{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;

  /* Schmaler als die übrigen Bausteine, und das ist der Punkt.

     24px oben und unten stellten den Störer auf dieselbe Höhe wie
     einen Abschnitt - zusammen mit dem Abstand des Blocks davor und
     danach wurde daraus ein Streifen, der die Seite auseinanderzog,
     statt sie zu unterbrechen. Ein Hinweis darf gedrängt sein. */
  padding:14px 0;
}

.lt-stoerer__worte{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

/* ── Schriftgröße ─────────────────────────────────────────────
   Ein Faktor, keine vier Sätze fester Größen.

   Der Störer trägt mal einen beiläufigen Hinweis und mal die
   Hauptaussage der Seite - und ein Balken, dessen Zeile so groß ist
   wie der Fließtext daneben, stört niemanden. Mit einem Faktor
   bleiben die Verhältnisse zwischen erster Zeile, zweiter Zeile und
   Symbol erhalten; vier getrennte Größensätze wären beim ersten
   Nachbessern auseinandergelaufen.

   Der Knopf bleibt außen vor: Er ist ein Bedienelement und soll
   überall gleich groß zu treffen sein. */
.lt-stoerer{--st-skala:1}
.lt-stoerer--gr-klein {--st-skala:.85}
.lt-stoerer--gr-gross {--st-skala:1.3}
.lt-stoerer--gr-riesig{--st-skala:1.7}

.lt-stoerer__text{
  /* clamp bleibt - der Faktor greift innerhalb, nicht darüber.
     Multiplizierte man das Ergebnis, könnte "Sehr groß" auf dem
     Telefon über die Breite hinauslaufen. */
  font-size:clamp(calc(1rem * var(--st-skala)),
                  calc(1.6vw * var(--st-skala)),
                  calc(1.15rem * var(--st-skala)));
  font-weight:700;
  line-height:1.35;
}
.lt-stoerer__unter{
  font-size:calc(.88rem * var(--st-skala));
  line-height:1.45;
  opacity:.82;
}

/* Doppelte Größe: Über dem Text braucht es Gewicht, sonst schwebt es
   dort als Tupfer. 48 px Zeichen statt 24. */
.lt-stoerer__symbol{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  width:calc(48px * var(--st-skala));
  height:calc(48px * var(--st-skala));
}
.lt-stoerer__symbol svg{
  width:calc(48px * var(--st-skala));
  height:calc(48px * var(--st-skala));
  /* Dünner werdende Linie beim Vergrößern: Ein Zeichen mit 1.5 auf
     80 Pixeln wirkt sonst plump neben der Schrift. */
  stroke-width:calc(1.5 / var(--st-skala));
}
/* Font Awesome (siehe includes/layout_symbole.php): Größe über die
   Schrift. Etwas kleiner als der Kasten - gefüllte Formen wirken
   schwerer als Striche. */
.lt-stoerer__symbol i{
  font-size:calc(40px * var(--st-skala));
  line-height:1;
}

/* Der Knopf steht am Ende der Zeile, nicht darunter: Ein Störer ist
   eine Zeile, und ein Umbruch macht daraus einen Abschnitt. */
/* Der Knopf steht unter dem Text - in einer Spalte gibt es kein
   "rechts daneben" mehr. */
.lt-stoerer__btn{
  flex:0 0 auto;
  margin-top:4px;
  padding:10px 20px;
  font-size:.9rem;
  white-space:nowrap;
}

/* ── Farbband ─────────────────────────────────────────────────
   Über die volle Breite, ohne Rundung: Es soll die Seite
   durchschneiden, nicht darauf liegen. */
.lt-stoerer--band{width:100%}
.lt-stoerer--band .lt-stoerer__innen{padding:12px 0}

/* Die Farben stehen in _basis.css als .lt-flaeche--*; der Renderer
   hängt die Klasse an die Sektion (Band, Hinweis) oder an den
   inneren Kasten. Hier steht nur noch, was der Störer daraus macht.

   Vorher lagen an dieser Stelle die Verlaufsformeln ein zweites Mal -
   zeichengleich mit denen der Kopfleiste. Ein Farbfehler war damit
   ein Fehler an drei Orten. */

/* Der Knopf auf farbigem Grund: Er muss sich vom Band abheben, und
   die Akzentfarbe kann er dafür nicht nehmen - sie ist ja der Grund.
   Welche Farbe stattdessen, entscheidet die Fläche über
   --auf-flaeche-knopf; auf Dunkel wird er weiß, auf der Akzentfläche
   hell mit Hausfarbe als Text. */
.lt-stoerer .lt-stoerer__btn{
  background:var(--auf-flaeche-knopf);
  color:var(--auf-flaeche-knopf-text);
}

/* ── Band mit Bild ────────────────────────────────────────────
   Wie das Farbband, nur mit Foto dahinter. Der Schleier steckt in der
   background-image-Angabe am Element - siehe render.php. */
.lt-stoerer--bild{
  width:100%;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.lt-stoerer--bild .lt-stoerer__innen{padding:40px 0}
.lt-stoerer--bild .lt-stoerer__symbol{color:#fff}

/* Der Text bekommt einen zarten Schatten: Auf einem Foto mit hellen
   Stellen reicht der Schleier allein nicht, und ein kräftigerer
   Schleier verdeckte das Bild. */
.lt-stoerer--bild .lt-stoerer__text,
.lt-stoerer--bild .lt-stoerer__unter{
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.lt-stoerer--bild .lt-stoerer__unter{opacity:.92}

.lt-stoerer--bild .lt-stoerer__btn{
  background:#fff;color:#1b1f26;
}

/* ── Kasten ───────────────────────────────────────────────────
   In der Spalte, mit Rundung - er liegt AUF der Seite. */
.lt-stoerer--kasten{padding:14px 0}
.lt-stoerer--kasten .lt-stoerer__innen{
  padding:20px 24px;
  border-radius:var(--radius);
  box-shadow:var(--schatten-klein, 0 1px 2px rgba(15,20,28,.06));
}
/* Rand aus der Fläche: --auf-flaeche-rand ist zart getönt und passt
   sich der Farbe an. Ohne Fläche greift die Vorgabe aus _basis.css. */
.lt-stoerer--kasten .lt-stoerer__innen{
  border:1px solid var(--auf-flaeche-rand);
}
/* Auf einem Verlauf kein Rand - er zeichnete die Kante nach, an der
   der Verlauf endet. */
.lt-stoerer--kasten[class*="-verlauf"] .lt-stoerer__innen{border:0}

/* Über das Token: Auf einem dunklen Kasten ist die Hausfarbe zu
   dunkel, dort liefert --auf-flaeche-akzent die aufgehellte
   Fassung. Ohne Fläche bleibt es die Hausfarbe. */
.lt-stoerer--kasten .lt-stoerer__symbol{color:var(--auf-flaeche-akzent)}

/* ── Hinweis ──────────────────────────────────────────────────
   Ohne Fläche, nur eine Linie links. Für Sätze, die dastehen sollen,
   ohne zu rufen: "Am 24. bleibt die Werkstatt geschlossen." */
.lt-stoerer--hinweis{padding:12px 0}
.lt-stoerer--hinweis .lt-stoerer__symbol{color:var(--auf-flaeche-akzent)}
.lt-stoerer--hinweis .lt-stoerer__text{font-weight:600}

/* Die Linie wandert mit der Ausrichtung.

   Vorher stand sie fest links und die Ausrichtung war gesperrt - bei
   rechtsbündigem Text hätte eine linke Linie ausgesehen, als gehörte
   sie zu etwas anderem.

   Links: Linie links. Rechts: Linie rechts. Mittig: eine kurze
   waagerechte darüber - eine senkrechte Linie neben zentriertem Text
   hat keine Seite, an der sie stehen könnte. */
.lt-stoerer--hinweis .lt-stoerer__innen{
  padding:4px 0 4px 18px;
  border-left:3px solid var(--auf-flaeche-akzent);
}

.lt-stoerer--hinweis.lt-block--aus-rechts .lt-stoerer__innen{
  padding:4px 18px 4px 0;
  border-left:0;
  border-right:3px solid var(--auf-flaeche-akzent);
}

.lt-stoerer--hinweis.lt-block--aus-mitte .lt-stoerer__innen{
  padding:18px 0 4px;
  border-left:0;
  position:relative;
}
.lt-stoerer--hinweis.lt-block--aus-mitte .lt-stoerer__innen::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:56px;height:3px;
  margin-left:-28px;
  background:var(--auf-flaeche-akzent);
  border-radius:2px;
}

/* ── Hinweis mit Farbe ────────────────────────────────────────
   Die Fläche kommt aus _basis.css. Hier nur die Folgen: Linie und
   Symbol nehmen die Textfarbe, sobald eine Fläche gesetzt ist -
   sonst stünde die Akzentfarbe auf der Akzentfläche.

   Über den Selektor [class*="lt-flaeche--"] statt vier Aufzählungen:
   Die Frage lautet "hat dieser Baustein eine Fläche", und genau das
   steht in der Klasse. */
.lt-stoerer--hinweis[class*="lt-flaeche--"]{padding:26px 0}
.lt-stoerer--hinweis[class*="lt-flaeche--"] .lt-stoerer__innen{
  border-left-color:currentColor;
  border-right-color:currentColor;
}
.lt-stoerer--hinweis[class*="lt-flaeche--"] .lt-stoerer__symbol{color:currentColor}
.lt-stoerer--hinweis[class*="lt-flaeche--"].lt-block--aus-mitte .lt-stoerer__innen::before{
  background:currentColor;
}

/* ── Ausrichtung ──────────────────────────────────────────────
   Beim Band und beim Kasten sinnvoll; der Hinweis bleibt links, weil
   seine Linie dort steht. */
/* In einer Spalte richtet align-items aus, nicht justify-content -
   das war beim Wechsel von Zeile auf Spalte die eigentliche
   Änderung. */
:where(.lt-stoerer.lt-block--aus-mitte) .lt-stoerer__innen{
  align-items:center;text-align:center;
}
:where(.lt-stoerer.lt-block--aus-rechts) .lt-stoerer__innen{
  align-items:flex-end;text-align:right;
}


/* Auf schmalen Schirmen umbrechen: Text und Knopf nebeneinander
   ergeben bei 380 Pixeln zwei Streifen. */
/* Auf schmalen Schirmen der Knopf über die volle Breite - dort ist
   er das Ziel der Seite, und ein schmaler Knopf am Rand wird
   übersehen. */
@media(max-width:640px){
  .lt-stoerer__btn{width:100%;text-align:center}
  .lt-stoerer__symbol{width:42px;height:42px}
  .lt-stoerer__symbol svg{width:42px;height:42px}
  .lt-stoerer__symbol i{font-size:36px}
}