/* ===========================================================
   Einheitlicher Seitenkopf fuer alle Unterseiten von Trallala
   -----------------------------------------------------------
   Eine Hoehe, eine Anordnung, ein Verlauf - nur Bild und Text
   wechseln. Jede Seite setzt lediglich:
       <header class="kopf" style="--kopf-bild:url(../bilder/x.jpg)">
   Ohne Bild greift ein Verlauf, die Anordnung bleibt gleich.
   =========================================================== */
.kopf{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  height:clamp(270px,32vw,360px);
  padding:0 !important; margin:0 0 28px;
  background:#031a3a; color:#fff;
}
.kopf::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg,rgba(3,26,58,.20) 0%,rgba(3,26,58,.62) 52%,rgba(2,16,38,.95) 100%),
    var(--kopf-bild,linear-gradient(135deg,#02122a 0%,#031a3a 58%,#0b3468 135%));
  background-size:cover; background-position:center 45%; background-repeat:no-repeat;
}
.kopf > .huelle{
  position:relative; z-index:1; width:100%; max-width:1140px;
  margin:0 auto; padding:0 18px 32px; max-height:100%;
}
.kopf h1{font-size:clamp(23px,2.9vw,36px); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kopf p{font-size:15.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.kopf .zahlen{margin-top:14px}
.kopf .zahlen div{padding:6px 12px; font-size:13px}
.kopf h1{margin:8px 0 10px}
.kopf .marke{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.92}
.kopf h1{margin:10px 0 12px; font-size:clamp(26px,4vw,44px); line-height:1.12; text-shadow:0 2px 18px rgba(0,0,0,.45)}
.kopf p{margin:0; font-size:17px; max-width:70ch; opacity:.96; text-shadow:0 1px 14px rgba(0,0,0,.5)}
.kopf .zahlen{margin-top:20px}
.kopf a.zurueck{display:inline-block; margin:0 0 12px; color:#fff; opacity:.9; text-decoration:none; font-size:14px}
@media (max-width:760px){
  .kopf{height:clamp(230px,58vw,280px)}
  .kopf > .huelle{padding:0 16px 22px}
  .kopf p{font-size:15.5px}
}

/* Seite "warum" hat einen eigenen Hero mit Story-Bild - dieselbe Hoehe
   und dieselbe Textanordnung wie der gemeinsame Kopf. */
.hero{height:clamp(270px,32vw,360px) !important; display:flex !important; align-items:flex-end !important}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(3,26,58,.20) 0%,rgba(3,26,58,.62) 52%,rgba(2,16,38,.95) 100%)}
.hero > .huelle{position:relative; z-index:2; max-height:100%; overflow:hidden; padding-bottom:26px !important}
.hero h1{font-size:clamp(22px,2.8vw,35px) !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.hero .unter{font-size:clamp(15px,1.3vw,17px) !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* Startseite: flacher Kopf, damit die Termine sofort sichtbar sind.
   Nur Bild und erster Satz - der Regionstext bleibt im HTML (wichtig fuer Google). */
.kopf.flach{height:clamp(175px,19vw,230px); margin-bottom:18px}
.kopf.flach > .huelle{padding:0 18px 20px}
.kopf.flach h1{font-size:clamp(19px,2.15vw,28px); margin:6px 0 0; -webkit-line-clamp:3}
.kopf.flach h1 span{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:13.5px; font-weight:400; line-height:1.4; opacity:.94; margin-top:7px}
.kopf.flach .zahlen{margin-top:10px}
.kopf.flach .zahlen div{padding:5px 11px; font-size:12.5px}
.kopf.flach .stand{display:none}
@media (max-width:760px){
  .kopf.flach{height:auto; padding-top:12px}
  .kopf.flach h1{font-size:19px; -webkit-line-clamp:2}
  .kopf.flach h1 span{font-size:12.5px; -webkit-line-clamp:2}
  .kopf.flach .zahlen{margin-top:8px}
}

/* Mobil: Kopf waechst mit dem Text mit - nichts wird mehr abgeschnitten */
@media (max-width:760px){
  .hero{height:auto !important; min-height:0 !important; display:block !important}
  .hero img{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important}
  .hero::after{inset:0 !important; height:auto !important}
  .hero > .huelle{max-height:none !important; overflow:visible !important; padding:96px 0 20px !important}
  .hero h1{-webkit-line-clamp:none !important; display:block !important; font-size:clamp(21px,6vw,29px) !important; line-height:1.16 !important; max-width:none !important}
  .hero .unter{-webkit-line-clamp:none !important; display:block !important; font-size:15px !important; line-height:1.5 !important}
  .hero .kicker{font-size:11.5px !important}
}