/* =============================================================================
   Beitragsseiten unter /wissen/<frage>, ab 24.08.2026
   -----------------------------------------------------------------------------
   Warum ein eigenes Stilblatt und nicht das Fundament allein: eine Beitragsseite
   ist der einzige Seitentyp der Website, der lange am Stueck gelesen wird. Alles
   andere wird ueberflogen. Lesen braucht andere Werte als Ueberfliegen, vor allem
   eine schmale Spalte und mehr Luft zwischen den Absaetzen.

   **Die Zeilenlaenge ist der ganze Trick.** Das Fundament setzt die Seite auf
   1180 Punkt, das ist fuer Karten und Raster richtig. Fliesstext ueber diese
   Breite ist unlesbar: das Auge findet den Anfang der naechsten Zeile nicht mehr.
   `70ch` sind rund 70 Zeichen je Zeile und damit im Bereich, den Setzer seit
   Jahrhunderten nehmen.

   Ausgenommen bleiben Ueberschriften und der Infokasten, die duerfen breiter.
   ============================================================================= */

.beitrag{padding:clamp(38px,4.4vw,62px) 0 clamp(60px,6vw,92px)}
.beitrag .wrap{max-width:840px}

/* --- Brotkrume. Sie sagt dem Leser, wo er gelandet ist, und der Suchmaschine
       dasselbe. Wer aus Google kommt, kennt die Website nicht. ------------- */
.brotkrume{font-size:.84rem; color:var(--navy-soft); margin:0 0 clamp(24px,3vw,38px);
           display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.brotkrume a{color:var(--navy-soft); text-decoration:none;
             border-bottom:1px solid var(--line); transition:color .25s var(--ease)}
.brotkrume a:hover{color:var(--akzent)}
.brotkrume span[aria-hidden]{color:var(--line); font-size:.9em}
.brotkrume > span:last-child{color:var(--muted)}

.beitrag h1{font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.12;
            letter-spacing:-.022em; margin:12px 0 18px; text-wrap:balance}
.beitrag .lead{max-width:62ch}

/* --- Zeile mit Verfasser und Lesezeit. Bewusst schmucklos: sie ist eine
       Angabe, kein Gestaltungselement. --------------------------------- */
.beitrag-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin:24px 0 0;
              padding:14px 0; border-top:1px solid var(--line);
              border-bottom:1px solid var(--line);
              font-size:.84rem; color:var(--navy-soft)}

.beitrag-text{margin-top:clamp(30px,3.6vw,46px)}
.beitrag-text p{max-width:70ch; font-size:1.06rem; line-height:1.72; color:var(--muted)}
.beitrag-text p b{color:var(--navy); font-weight:600}
.beitrag-text h2{font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.2;
                 letter-spacing:-.02em; margin:clamp(34px,4vw,52px) 0 14px}

/* --- Der Infokasten -------------------------------------------------------
   Thomas am 24.08.: „Ich hätte gerne nur eine kleine Info Box wenn sowas
   passend ist. Nicht belehrend, sondern informierend."

   Daraus folgen die Gestaltungsentscheidungen: **kein Ausrufezeichen, kein
   Warnton, keine Farbe, die nach Hinweis aussieht.** Der Kasten steht auf der
   ruhigen Sandflaeche des Systems und traegt links einen Strich in Akzentblau,
   nicht in Rot. Rot waere eine Warnung, und gewarnt wird hier niemand.

   **Er ist eine Ausnahme und keine Gliederung.** Hoechstens einer je Beitrag,
   und nur, wenn er etwas beitraegt, das der Fliesstext nicht tragen kann, etwa
   einen Fachbegriff oder eine Quelle. Wer ihn dreimal setzt, hat ihn falsch
   verstanden. */
.infokasten{margin:clamp(30px,3.6vw,44px) 0; padding:22px 26px;
            background:var(--sand); border-left:3px solid var(--akzent);
            border-radius:0 var(--r-s) var(--r-s) 0}
.infokasten .marke{display:block; margin-bottom:8px;
                   font-size:.72rem; font-weight:700; letter-spacing:.14em;
                   text-transform:uppercase; color:var(--akzent)}
.infokasten p{margin:0; max-width:none; font-size:.98rem; line-height:1.62}

/* --- Der Abschluss. Eine Frage und ein Gespraechsangebot, kein Formular. --- */
.beitrag-schluss{margin-top:clamp(44px,5vw,68px); padding-top:clamp(30px,3.4vw,42px);
                 border-top:1px solid var(--line)}
.beitrag-schluss h2{font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2;
                    letter-spacing:-.02em; margin:0 0 12px}
.beitrag-cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:26px}

@media(max-width:620px){
  .infokasten{padding:18px 20px}
  .beitrag-text p{font-size:1.02rem; line-height:1.68}
}