/* ==================================================================
   Dr. Ryll Lab GmbH – gemeinsames Stylesheet für alle Seiten
   Änderungen hier wirken sich auf jede Seite aus.
   ================================================================== */

/* ------------------------------------------------------------------
   1. DESIGN-TOKENS – Farben und Maße zentral an einer Stelle
   ------------------------------------------------------------------ */
:root{
  --petrol:        #719da0;   /* Hausfarbe: Flächen, Überschriften, Links */
  --petrol-dunkel: #5d888b;   /* Hover */
  --text:          #3c4249;   /* Fließtext */
  --text-hell:     #ffffff;
  --linie:         #e3e8ea;

  --schrift: "Lato","Segoe UI","Helvetica Neue",Arial,sans-serif;

  --inhalt-breite: 1000px;    /* Textbereich der Unterseiten */
  --kopfhoehe: 74px;
  --bandhoehe: 230px;         /* Höhe der durchgehenden Bildbänder */
}

/* ------------------------------------------------------------------
   2. GRUNDLAGEN
   ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--schrift); color:var(--text);
  font-size:15px; line-height:1.62; background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--petrol); text-decoration:none}
a:hover{color:var(--petrol-dunkel)}
a:focus-visible,button:focus-visible{outline:2px solid var(--petrol); outline-offset:3px}
h1,h2,h3{margin:0 0 .8em; font-weight:400; line-height:1.3; color:var(--petrol)}
h1{font-size:1.55rem; text-align:center}
h2{font-size:1.55rem; text-align:center}
h3{font-size:1.2rem; text-align:center}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em; padding-left:1.2rem}
li{margin-bottom:.35rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------------------------
   3. KOPFBEREICH
   ------------------------------------------------------------------ */
.kopf{position:sticky; top:0; z-index:60; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.07)}
.kopf__innen{
  max-width:1100px; margin:0 auto; padding:0 1.5rem;
  height:var(--kopfhoehe); display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.kopf__logo img{height:34px; width:auto}
.nav ul{display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0}
.nav li{margin:0}
.nav a{font-size:.98rem; color:var(--petrol)}
.nav a[aria-current="page"]{color:#a9c3c5}   /* aktuelle Seite blasser */
.nav a:hover{color:var(--text)}
/* Sprachwähler in der Kopfzeile */
.nav__sprachen{display:flex; align-items:center; gap:.5rem; margin-left:.4rem !important;
  padding-left:1rem; border-left:1px solid var(--linie); font-size:.86rem; letter-spacing:.03em}
.nav__sprachen a{color:#a9c3c5}
.nav__sprachen a:hover{color:var(--text)}
.nav__sprachen span[aria-current]{color:var(--petrol); font-weight:600}
.nav-schalter{
  display:none; background:none; border:1px solid var(--linie); border-radius:2px;
  padding:.45rem .8rem; font:inherit; color:var(--petrol); cursor:pointer;
}

/* ------------------------------------------------------------------
   4. BILDBÄNDER (durchgehend über die volle Breite)
   ------------------------------------------------------------------ */
.band{height:var(--bandhoehe); background:#d8dee1 center/cover no-repeat}

/* Bühne der Startseite: höher, mit Slider-Bedienung */
.buehne{position:relative; height:min(80vh,720px); background:#2b3a42; overflow:hidden}
.buehne__bilder{position:absolute; inset:0}
.buehne__bild{
  position:absolute; inset:0; background:center/cover no-repeat;
  opacity:0; transition:opacity 3s ease-in-out;
}
.buehne__bild.aktiv{opacity:1}

/* Wabe der Leistungsbereiche, mittig ueber der Bildergalerie */
.wabe{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;              /* nur die Sechsecke selbst sind klickbar */
  animation:wabe-ein 1.2s ease-out both;
}
.wabe svg{height:min(86%,640px); width:auto; max-width:82vw; overflow:visible}
.wabe__feld{pointer-events:auto; cursor:pointer}
.wabe__feld polygon{
  fill:rgba(255,255,255,.82); stroke:none;
  transition:fill .25s ease;
}
.wabe__feld text{
  fill:var(--petrol); font-size:19px; text-anchor:middle;
  dominant-baseline:middle; pointer-events:none;
}
.wabe__feld:hover polygon,
.wabe__feld:focus-visible polygon{fill:#fff}
.wabe__feld:focus-visible{outline:none}
.wabe__feld:focus-visible polygon{stroke:var(--petrol); stroke-width:3}
@keyframes wabe-ein{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.buehne__pfeil{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:none; border:none; color:rgba(255,255,255,.85);
  font-size:2rem; line-height:1; padding:.5rem 1rem; cursor:pointer;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.buehne__pfeil:hover{color:#fff}
.buehne__pfeil--vor{right:.5rem}
.buehne__pfeil--zurueck{left:.5rem}
.buehne__punkte{position:absolute; right:1.6rem; bottom:1.2rem; z-index:2; display:flex; gap:.45rem}
.buehne__punkte button{
  width:9px; height:9px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.55); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.buehne__punkte button.aktiv{background:#fff}

/* ------------------------------------------------------------------
   5. TEXTABSCHNITT DER UNTERSEITEN
   Überschrift zentriert, darunter zwei Spalten im Blocksatz
   ------------------------------------------------------------------ */
.abschnitt{padding:3.5rem 1.5rem}
.abschnitt__innen{max-width:var(--inhalt-breite); margin:0 auto}
.zweispaltig{
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
  text-align:justify; hyphens:auto;
}
.zweispaltig ul{text-align:left}
.mitte{text-align:center}

/* Akkreditierungs-/Förderlogos innerhalb einer Spalte */
.logoreihe{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:1.2rem 0}
.logoreihe img{max-height:70px; width:auto}
.bildunterschrift{font-size:.86rem; margin:0}

/* ------------------------------------------------------------------
   5a. UNTERNEHMEN – erster Textblock der Startseite
   Gleiche Ranseitenabstaende wie die Unterseiten, Text in zwei Spalten.
   ------------------------------------------------------------------ */
.unternehmen{padding:3.5rem 1.5rem}
.unternehmen__innen{max-width:var(--inhalt-breite); margin:0 auto}
.unternehmen__spalten{
  columns:2; column-gap:2.5rem;
  text-align:justify; hyphens:auto;
}
.unternehmen__spalten p{break-inside:avoid}

@media (max-width:900px){
  .unternehmen__spalten{columns:1}
}

/* ------------------------------------------------------------------
   5b. MELDUNGEN (Seite "Aktuelles")
   Jede Meldung ist eine Karte auf hellem Grund. Die oberste - also die
   neueste - ist farblich hervorgehoben.
   ------------------------------------------------------------------ */
.meldungen{background:#f5f8f8}
.meldungen .abschnitt__innen{max-width:820px}
.meldungen h1{margin-bottom:.6rem}
.meldungen__einleitung{margin-bottom:2.8rem}

.meldung{
  background:#fff; border:1px solid var(--linie); border-radius:4px;
  padding:2rem 2.2rem 1.8rem; margin-bottom:1.6rem;
  box-shadow:0 1px 3px rgba(60,66,73,.05);
  transition:box-shadow .25s ease, transform .25s ease;
}
.meldung:hover{box-shadow:0 8px 24px rgba(60,66,73,.10); transform:translateY(-2px)}

/* Datum als Etikett statt als graue Zeile */
.meldung__datum{
  display:inline-block; margin-bottom:.9rem;
  background:#eaf1f1; color:var(--petrol-dunkel);
  font-size:.78rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.32rem .85rem; border-radius:100px;
}
.meldung__titel{
  text-align:left; font-size:1.4rem; line-height:1.28;
  color:var(--petrol-dunkel); margin-bottom:1rem;
}
.meldung__text{text-align:left; hyphens:auto}
.meldung__text img{margin:1.4rem 0; border-radius:3px; width:100%}   /* volle Spaltenbreite, unabhaengig von der Groesse der Bilddatei */
.meldung__text ul{margin-top:.8rem}
.meldung__text p:last-child{margin-bottom:0}

/* Die neueste Meldung hervorheben */
.meldung:first-of-type{
  border-color:var(--petrol); border-top:4px solid var(--petrol);
  box-shadow:0 4px 18px rgba(113,157,160,.16);
}
.meldung:first-of-type .meldung__datum{background:var(--petrol); color:#fff}
.meldung:first-of-type .meldung__datum::after{content:" · Aktuell"; opacity:.75}
.meldung:first-of-type .meldung__titel{color:var(--petrol)}

@media (max-width:900px){
  .meldung{padding:1.5rem 1.3rem}
  .meldung__titel{font-size:1.2rem}
  .meldung:hover{transform:none}
}

/* ------------------------------------------------------------------
   5c. WISSEN – Themenblöcke als Karten, Fragen zum Aufklappen
   ------------------------------------------------------------------ */
.wissensseite{background:#f5f8f8; counter-reset:block}
.wissensseite .abschnitt__innen{max-width:820px}
.wissensseite h1{margin-bottom:.6rem}
.wissen__einleitung{max-width:620px; margin:0 auto 3rem}

.wissen__block{
  background:#fff; border:1px solid var(--linie); border-radius:4px;
  overflow:hidden; margin-bottom:1.4rem;
  box-shadow:0 1px 3px rgba(60,66,73,.05);
}
/* Kopfleiste des Blocks in der Hausfarbe, mit fortlaufender Nummer */
.wissen__block h2{
  counter-increment:block;
  display:flex; align-items:center; gap:.9rem;
  background:var(--petrol); color:#fff;
  margin:0; padding:1rem 1.6rem;
  font-size:1.08rem; text-align:left; letter-spacing:.01em;
}
.wissen__block h2::before{
  content:counter(block);
  flex:none; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}

/* Steht nur ein einziger Themenblock auf der Seite, waere eine "1" sinnlos */
.wissen__block:only-of-type h2::before{display:none}

.frage{border-bottom:1px solid var(--linie)}
.frage:last-child{border-bottom:none}
.frage summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.05rem 3.4rem 1.05rem 1.6rem;
  color:var(--text); font-size:1rem; transition:background .18s ease;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{background:#f2f7f7; color:var(--petrol-dunkel)}
/* Pluszeichen in einer Scheibe, dreht sich beim Aufklappen zum Minus */
.frage summary::after{
  content:"+"; position:absolute; right:1.3rem; top:50%;
  transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:#eaf1f1; color:var(--petrol-dunkel);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1;
  transition:transform .22s ease, background .18s ease;
}
.frage[open] summary{background:#eef5f5; color:var(--petrol-dunkel)}
.frage[open] summary::after{
  transform:translateY(-50%) rotate(45deg);
  background:var(--petrol); color:#fff;
}
.frage__text{
  padding:1.2rem 1.9rem 1.5rem;
  border-left:3px solid var(--petrol);
  background:#fbfdfd;
  text-align:left; hyphens:auto;
}
.frage__text ul{margin-top:.7rem}
.frage__text li{margin-bottom:.5rem}
.frage__text p:last-child{margin-bottom:0}
.frage:target summary{background:#eef5f5}

.wissen__schluss{margin-top:2.6rem}

@media (max-width:900px){
  .wissen__block h2{padding:.9rem 1.1rem; font-size:1rem}
  .frage summary{padding:.95rem 3rem .95rem 1.1rem}
  .frage__text{padding:1rem 1.2rem 1.2rem}
}

/* ------------------------------------------------------------------
   5d. RECHTSTEXTE – Impressum und Datenschutz
   Einspaltig und linksbündig: Blocksatz und zwei Spalten erschweren
   das Nachschlagen in langen Paragraphen.
   ------------------------------------------------------------------ */
.rechtstext .abschnitt__innen{max-width:760px}
.rechtstext h1{margin-bottom:2rem}
.rechtstext h2{text-align:left; font-size:1.2rem; margin:2.4rem 0 .7rem}
.rechtstext h3{text-align:left; font-size:1.02rem; margin:1.7rem 0 .5rem; color:var(--text)}
.rechtstext p, .rechtstext ul{text-align:left}
.rechtstext h1 + h2{margin-top:0}
/* Anker nicht unter der klebenden Kopfzeile verstecken */
.rechtstext h3[id]{scroll-margin-top:calc(var(--kopfhoehe) + 1rem)}
.rechtstext h3:target{color:var(--petrol)}

/* ------------------------------------------------------------------
   6. STREIFEN – nur Startseite: halb Foto, halb Textfläche
   ------------------------------------------------------------------ */
.streifen{display:grid; grid-template-columns:1fr 1fr; min-height:430px}
.streifen__bild{background:#d8dee1 center/cover no-repeat}
.streifen__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:3.5rem clamp(1.5rem,5vw,4.5rem); text-align:justify; hyphens:auto;
}
.streifen__text .icon{height:56px; width:auto; margin:0 auto 1.2rem}
.streifen__text .weiter{display:block; text-align:center; margin-top:1.4rem}
.streifen--petrol .streifen__text{background:var(--petrol); color:var(--text-hell)}
.streifen--petrol h3{color:var(--text-hell)}
.streifen--petrol a{color:rgba(255,255,255,.85)}
.streifen--petrol a:hover{color:#fff}
.streifen--petrol .icon{filter:brightness(0) invert(1)}
.streifen--weiss .streifen__bild{order:2}
.streifen--weiss .streifen__text{order:1; background:#fff}
.verweise{text-align:center; margin-top:1.4rem}
.verweise a{display:block; margin-bottom:.2rem}

/* ------------------------------------------------------------------
   7. REFERENZEN (Startseite)
   ------------------------------------------------------------------ */
.referenzen{padding:4.5rem 1.5rem}
.referenzen__innen{max-width:760px; margin:0 auto; text-align:center}
.logoband{margin-top:3rem; overflow:hidden; position:relative}
/* Weiche Kanten links und rechts. Die Maske kostet auf Mobilgeraeten bei jedem
   Einzelbild Rechenzeit, daher erst ab Tabletbreite. */
@media (min-width:700px){
  .logoband{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
            mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  }
}
/* will-change und translateZ legen das Band auf eine eigene Grafikebene.
   Ohne das zeichnet das Handy bei jedem Einzelbild die halbe Seite neu. */
.logoband__spur{display:flex; width:max-content; animation:logolauf 90s linear infinite;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden}
.logoband:hover .logoband__spur{animation-play-state:paused}   /* Anhalten beim Draufzeigen */
.logoband__gruppe{display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem}
.logoband__gruppe img{max-height:140px; width:auto; flex:none}
@keyframes logolauf{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}   /* genau eine Gruppe weit */
}

/* ------------------------------------------------------------------
   8. ANSPRECHPARTNER (Startseite)
   ------------------------------------------------------------------ */
.ansprechpartner{background:var(--petrol); color:var(--text-hell); padding:4.5rem 1.5rem}
.ansprechpartner h2{color:var(--text-hell)}
.personen{max-width:900px; margin:2.5rem auto 0; display:grid; grid-template-columns:1fr 1fr; gap:3.5rem}
.person{text-align:center}
.person img.portrait{width:170px; margin:0 auto 1.2rem; border-radius:2px}
.person__name{font-size:1.1rem; margin:0}
.person__rolle{margin:0 0 1.2rem; opacity:.85}
.ansprechpartner a{color:#fff}

.kontaktzeile{display:flex; align-items:center; justify-content:center; gap:.6rem; margin-bottom:.4rem}
.kontaktzeile img{width:16px; flex:none}

/* ------------------------------------------------------------------
   9. KONTAKTFORMULAR (Startseite)
   ------------------------------------------------------------------ */
.kontakt{padding:4.5rem 1.5rem}
.kontakt__innen{max-width:760px; margin:0 auto}
.kontakt__einleitung{text-align:center; margin-bottom:2.5rem}
.feldpaar{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
label{display:block; font-size:.92rem; margin-bottom:.3rem}
input,textarea{
  width:100%; padding:.65rem .75rem; border:1px solid var(--linie);
  border-radius:2px; font:inherit; margin-bottom:1.1rem; background:#fafbfb; color:var(--text);
}
input:focus,textarea:focus{border-color:var(--petrol); outline:none; background:#fff}
.zustimmung{display:flex; gap:.8rem; font-size:.86rem; line-height:1.55}
.zustimmung input{width:auto; margin:.3rem 0 0}
.hinweis-pflicht{font-size:.84rem; opacity:.7; margin:1.2rem 0}
.knopf{
  background:var(--petrol); color:#fff; border:none; padding:.75rem 2.2rem;
  font:inherit; border-radius:2px; cursor:pointer;
}
.knopf:hover{background:var(--petrol-dunkel)}

/* ------------------------------------------------------------------
   10. FUSSBEREICH – Petrolfläche mit Wabenmuster, seitlich eingerückt
   ------------------------------------------------------------------ */
.fuss{
  background:var(--petrol); color:var(--text-hell);
  margin:0 10px 2.5rem; padding:2.5rem 1.5rem; font-size:.94rem;
}
.fuss__raster{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:start;
}
.fuss__spalte{text-align:center}
.fuss img.logo{max-width:190px; margin:0 auto .8rem}
.fuss a{color:#fff}
.fuss__rechtliches{display:flex; gap:1.6rem; justify-content:center}
.fuss p{margin:0 0 .3rem}

/* ------------------------------------------------------------------
   11. MATOMO-LEISTE UND NACH-OBEN-KNOPF
   ------------------------------------------------------------------ */
.einwilligung{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#3c4249; color:#fff; font-size:.9rem; line-height:1.55;
  padding:1.1rem 1.5rem; display:flex; gap:1.5rem;
  align-items:center; justify-content:center; flex-wrap:wrap;
  box-shadow:0 -2px 14px rgba(0,0,0,.2);
}
.einwilligung__text{margin:0; max-width:640px}
.einwilligung a{color:#fff; text-decoration:underline}
.einwilligung__knoepfe{display:flex; gap:.8rem; flex:none}
.einwilligung .knopf{padding:.55rem 1.5rem; font-size:.9rem}
.knopf--klar{background:none; border:1px solid rgba(255,255,255,.55); color:#fff}
.knopf--klar:hover{background:rgba(255,255,255,.12)}

/* Kontaktwege statt Formular */
.kontaktwege{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin-top:2.5rem;
}
.kontaktweg{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.35rem; padding:1.8rem 1rem; border:1px solid var(--linie);
  border-radius:2px; color:var(--text); transition:border-color .2s ease;
}
.kontaktweg:hover{border-color:var(--petrol); color:var(--text)}
/* Die Kontakt-Icons sind weiße SVGs (aus der Fußzeile auf Petrolgrund).
   Auf weißem Grund wären sie unsichtbar - deshalb hier eine Petrolscheibe
   als Hintergrund. */
.kontaktweg img{
  width:22px; height:22px; margin-bottom:.7rem;
  background:var(--petrol); border-radius:50%;
  padding:13px; box-sizing:content-box;
}
.kontaktweg__label{font-size:.84rem; letter-spacing:.05em; text-transform:uppercase; opacity:.65}
.kontaktweg__wert{color:var(--petrol); font-size:1.05rem}

.nach-oben{
  position:fixed; right:1.4rem; bottom:4.2rem; z-index:65;
  width:40px; height:40px; border-radius:50%; border:none;
  background:var(--petrol); color:#fff; font-size:1.1rem; cursor:pointer;
}

/* ------------------------------------------------------------------
   12. MOBIL
   ------------------------------------------------------------------ */
@media (max-width:900px){
  .zweispaltig,.streifen,.personen,.fuss__raster,.feldpaar,.kontaktwege{grid-template-columns:1fr}
  .streifen__bild{min-height:240px}
  .streifen--weiss .streifen__bild{order:0}
  .streifen--weiss .streifen__text{order:0}
  .band{height:170px}
  .wabe{display:none}
  .logoband__gruppe{gap:2.2rem; padding-right:2.2rem}
  .logoband__gruppe img{max-height:95px}
  .nav-schalter{display:block}
  .nav{display:none; width:100%; padding-bottom:1rem}
  .nav.offen{display:block}
  .kopf__innen{flex-wrap:wrap; height:auto; padding-top:1rem; padding-bottom:.5rem}
  .nav ul{flex-direction:column; align-items:stretch; gap:0; padding-top:.5rem}
  /* Auf dem Handy muss jeder Menuepunkt eine ganze Zeile treffbar sein.
     Als reiner Textlink war das Ziel nur rund 20 px hoch - wer daneben
     tippt, loest nichts aus und haelt die Seite fuer traege. Empfohlen
     sind mindestens 44 px. */
  .nav li{border-bottom:1px solid var(--linie)}
  .nav li:last-child{border-bottom:none}
  .nav a{display:block; padding:.95rem .2rem; font-size:1.05rem}
  .nav-schalter{padding:.7rem 1rem; font-size:1rem}
  .nav__sprachen{margin-left:0 !important; padding-left:0; border-left:none;
    border-top:1px solid var(--linie); padding-top:.4rem; width:100%; gap:.2rem;
    display:flex; align-items:center}
  .nav__sprachen a,.nav__sprachen span{display:inline-block; padding:.8rem .7rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Nutzer, die Bewegung abgewaehlt haben, sehen ein ruhendes, scrollbares Band */
  .logoband__spur{animation:none}
  .buehne__bild{transition:none}
  .wabe{animation:none}
  .logoband{overflow-x:auto}
}


/* ------------------------------------------------------------------
   Handygerechte Bildgroessen
   Grosse Motive liegen doppelt vor: in voller Breite (2000 px) und in
   einer 800-px-Fassung. Ein Handy muss sonst Bilder entschluesseln, die
   fuenfmal breiter sind als sein Bildschirm - das kostet spuerbar Zeit
   beim Seitenwechsel. Welche Fassung geladen wird, entscheidet allein
   die Bildschirmbreite; geladen wird immer nur eine davon.
   ------------------------------------------------------------------ */
.buehne__bild,.band,.streifen__bild{background-image:var(--bild)}
@media (max-width:800px){
  .buehne__bild,.band,.streifen__bild{background-image:var(--bild-klein)}
}