/* Seitenregeln aus dem abgenommenen Prototyp ueber-uns.html,
   unveraendert uebernommen. Der Ausschnitt beginnt bei der ersten
   seitenspezifischen Regel, damit nichts verloren geht. */
.wer-grid{display:grid;grid-template-columns:.42fr 1.58fr;gap:40px;align-items:start}
.wer-photo{position:relative;max-width:230px}
.wer-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:48% 52% 45% 55%/50% 42% 58% 50%;border:4px solid var(--cat-mid)}
.wer-photo::before{content:'';position:absolute;width:70px;height:70px;border-radius:50%;background:var(--gold-mid);bottom:-12px;right:-8px;z-index:-1;opacity:.75}

/* mission / vision panels */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--tc,var(--cat-main));border-radius:18px;padding:30px 28px;position:relative;transition:all .3s}
.mv-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.1)}
.mv-ic{width:52px;height:52px;border-radius:14px;background:var(--tcl,var(--cat-light));display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.mv-card h3{font-size:20px;margin-bottom:10px}
.mv-card p{color:var(--text-mid);font-size:14px;line-height:1.65;margin-bottom:9px}

/* founders quote */
.quote-band{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);border-radius:22px;padding:34px 36px;margin-top:26px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:0 14px 36px rgba(196,154,40,.14);position:relative;overflow:visible}
.qb-faces{display:flex;flex-shrink:0}
.qb-faces img{width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:0 3px 10px rgba(42,58,26,.14)}
.qb-faces img + img{margin-left:-20px}
.qb-text{flex:1;min-width:240px}
.qb-text blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:19px;color:var(--green-deepest);line-height:1.5;margin-bottom:8px}
.qb-text cite{font-size:13px;color:var(--text-muted);font-style:normal;font-weight:700}

/* stats */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 20px;text-align:center;transition:all .3s}
.st-cell:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(42,58,26,.09);border-color:var(--cat-main)}
.st-cell b{display:block;font-family:'Playfair Display',serif;font-size:34px;color:var(--cat-dark);line-height:1.05}
.st-cell span{font-size:13px;color:var(--text-mid);display:block;margin-top:6px;line-height:1.45}

/* values */
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.val-cell{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:24px 22px;transition:all .3s}
.val-cell:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(42,58,26,.09);border-color:var(--cat-main)}
.val-ic{width:48px;height:48px;border-radius:13px;background:var(--cat-light);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:13px}
.val-cell h3{font-size:16.5px;margin-bottom:6px;line-height:1.3}
.val-cell p{color:var(--text-mid);font-size:13.5px;line-height:1.6}

/* founders + team */
.fnd-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fnd-card{background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:26px;display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:start;transition:all .3s;position:relative}
.fnd-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11);border-color:var(--cat-main)}
.fnd-photo{width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:46% 54% 48% 52%/52% 44% 56% 48%;border:3px solid var(--cat-mid)}
.fnd-role{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cat-dark);margin-bottom:4px}
.fnd-card h3{font-size:19px;margin-bottom:8px}
.fnd-card p{color:var(--text-mid);font-size:13.5px;line-height:1.6}

.team-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:24px}
.team-chip{background:var(--white);border:1px solid var(--cream-border);border-radius:16px;padding:16px 14px 18px;
           text-align:center;transition:all .3s;position:relative}
.team-chip:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(42,58,26,.12);border-color:var(--cat-main)}
.team-chip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;transition:transform .45s}
.team-chip:hover img{transform:scale(1.04)}
.team-chip b{display:block;font-family:'Playfair Display',serif;font-size:15.5px;color:var(--green-deepest);margin-top:13px;line-height:1.3}
.team-chip span{font-size:12.5px;color:var(--text-muted);display:block;margin-top:3px}
.team-chip .tc-more{display:block;font-size:12px;font-weight:700;color:var(--cat-dark);margin-top:9px;opacity:0;transition:opacity .25s}
.team-chip:hover .tc-more{opacity:1}

/* ===== ZEITSTRAHL: Jahresachse + vertikale Einträge (kein Scrollen) ===== */
.yr-axis{position:relative;display:grid;grid-template-columns:repeat(6,1fr);margin:8px 0 34px;padding-top:6px}
.yr-axis::before{content:'';position:absolute;left:8.33%;right:8.33%;top:32px;height:5px;border-radius:3px;
                 background:linear-gradient(90deg,var(--cat-mid),var(--cat-main) 55%,var(--gold-main));z-index:0}
.yr{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;padding-bottom:4px}
.yr-dot{width:54px;height:54px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main);
        display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;
        font-size:14.5px;color:var(--cat-dark);box-shadow:0 4px 14px rgba(42,58,26,.14);transition:all .28s}
.yr:hover .yr-dot{transform:scale(1.09);border-color:var(--gold-main)}
.yr.now .yr-dot{width:64px;height:64px;border-color:var(--gold-main);background:var(--gold-light);
                color:var(--gold-deeptext);box-shadow:0 0 0 9px rgba(235,195,95,.2)}
.yr-tick{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:center}
.yr:hover .yr-tick{color:var(--cat-dark)}

.tl-list{display:flex;flex-direction:column;gap:14px}
.tl-row{display:grid;grid-template-columns:86px 1fr;gap:20px;align-items:start;position:relative;
        scroll-margin-top:calc(var(--header-h) + 26px)}
.tl-mark{display:flex;flex-direction:column;align-items:center;position:relative}
.tl-num{width:62px;height:62px;border-radius:50%;background:var(--white);border:4px solid var(--cat-main);
        display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;
        font-size:15px;color:var(--cat-dark);flex-shrink:0;z-index:2;transition:all .28s;box-shadow:0 4px 14px rgba(42,58,26,.12)}
.tl-row.now .tl-num{border-color:var(--gold-main);background:var(--gold-light);color:var(--gold-deeptext);
                    box-shadow:0 0 0 9px rgba(235,195,95,.18)}
/* connecting spine between the year markers */
.tl-mark::after{content:'';position:absolute;top:62px;bottom:-14px;left:50%;width:4px;transform:translateX(-50%);
                background:var(--cat-mid);opacity:.7;z-index:1}
.tl-row:last-child .tl-mark::after{display:none}

.tl-card{background:var(--white);border:1px solid var(--cream-border);border-left:5px solid var(--ac,var(--cat-main));
         border-radius:16px;padding:20px 24px;transition:all .3s}
.tl-row:hover .tl-card{transform:translateX(4px);box-shadow:0 12px 30px rgba(42,58,26,.1);border-color:var(--ac,var(--cat-main))}
.tl-row.now .tl-card{border-color:var(--gold-main);background:linear-gradient(120deg,var(--gold-light),var(--white) 62%)}
.tl-card h3{font-size:18px;margin-bottom:7px;line-height:1.32}
.tl-card p{color:var(--text-mid);font-size:14px;line-height:1.6}

@media(max-width:900px){
  .yr-axis{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .yr-axis::before{display:none}
  .tl-row{grid-template-columns:62px 1fr;gap:14px}
  .tl-num{width:52px;height:52px;font-size:13.5px;border-width:3px}
  .tl-mark::after{top:52px}
  .tl-card{padding:16px 18px}
}
@media(max-width:520px){
  .yr-axis{grid-template-columns:repeat(2,1fr)}
  .team-row{grid-template-columns:repeat(2,1fr)}
}

/* locations */
.loc2-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.loc2-card{background:var(--white);border:1px solid var(--cream-border);border-top:5px solid var(--cat-main);border-radius:18px;padding:26px 24px;transition:all .3s;position:relative}
.loc2-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(42,58,26,.11)}
.loc2-card h3{font-size:20px;margin-bottom:14px}
.loc2-row{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--cream-border);font-size:13.5px}
.loc2-row:last-of-type{border-bottom:none}
.loc2-row b{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.loc2-row span{color:var(--text-mid)}

@media(max-width:900px){
  .wer-grid{grid-template-columns:1fr}
  .mv-grid,.fnd-grid,.loc2-grid{grid-template-columns:1fr}
  .st-grid,.val-grid{grid-template-columns:repeat(2,1fr)}
  .team-row{grid-template-columns:repeat(3,1fr)}
  /* Zeitstrahl wird zur vertikalen Zeitleiste */
  .tl{display:block;overflow:visible;margin-right:0;scroll-snap-type:none}
  .tl-item{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto;flex:none;padding:0;position:relative}
  .tl-item + .tl-item{margin-top:16px}
  .tl-axis{grid-row:1;grid-column:1;justify-content:center;align-items:flex-start;padding-top:4px}
  .tl-axis::before{left:50%;right:auto;top:0;bottom:0;width:4px;height:auto;transform:translateX(-50%)}
  .tl-item:first-child .tl-axis::before{top:26px}
  .tl-item:last-child  .tl-axis::before{bottom:auto;height:30px}
  .tl-dot{width:52px!important;height:52px!important;font-size:14px!important;box-shadow:0 4px 12px rgba(42,58,26,.14)!important}
  .tl-item:nth-child(odd) .tl-card,.tl-item:nth-child(even) .tl-card{grid-row:1;grid-column:2;align-self:start;margin:0}
  .tl-card::after{display:none}
  .tl-foot{display:none}
}


/* ===== BREITE BILDSCHIRME: einheitlicher Hero auf allen Seiten =====
   Inhalt sitzt unten, die zusätzliche Höhe zeigt Foto statt Leerraum. */
@media(min-width:1280px){
  .hero{min-height:420px;display:flex;align-items:center;padding-top:40px;padding-bottom:36px}
  .hero > .wrap{width:100%}
}
@media(min-width:1600px){
  .hero{min-height:450px}
}
@media(min-width:1900px){
  .hero{min-height:470px}
}

/* ============================================================
   MOBILE HARDENING  ·  Mobile ist der Haupt-Traffic
   Wird zuletzt eingebunden und gewinnt daher bei gleicher Spezifitaet.
   ============================================================ */
@media(max-width:1024px){
  .wrap{padding:0 24px}
}
@media(max-width:900px){
  .wrap{padding:0 18px}

  /* jedes zweispaltige Layout wird einspaltig */
  .ansatz-grid,.warum-intro-grid,.warum-grid,.explain-grid,.loc-grid,.location-grid,
  .end-grid,.form-layout,.map-grid,.intensiv-band,.apart-band,.story-box,.wel-grid,
  .dx-grid,.nav-cards,.combine-box .warum-intro-grid{grid-template-columns:1fr!important}

  /* Fotos werden nicht zum Streifen */
  .ansatz-photo-wrap,.warum-photo-wrap,.wel-photo{max-width:260px;margin-left:auto;margin-right:auto}

  /* drei- und mehrspaltige Raster auf zwei Spalten */
  .diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
  .path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
  .stat-strip,.trust-strip,.hub-grid,.toffer-grid,.ap-grid,.price-grid,
  .fgrid,.why-cell-grid{grid-template-columns:repeat(2,1fr)!important}
  .combo-strip{grid-template-columns:1fr!important}

  /* dekorative Blaetter/Punkte kollidieren in schmalen Spalten mit Text */
  .deco{display:none}
}
@media(max-width:640px){
  .wrap{padding:0 16px}

  /* konsequent einspaltig */
  .diag-grid,.subtherapy-grid,.feature-grid,.why-grid,.fin-grid,.prod-grid,.pr-grid,
  .path-grid,.combine-flow,.early-cols,.chal-grid,.gal,.info-tiles,.disc-strip,
  .hub-grid,.toffer-grid,.ap-grid,.price-grid,.fgrid,.cmp-2{grid-template-columns:1fr!important}
  .stat-strip,.trust-strip{grid-template-columns:1fr 1fr!important}

  /* breite Kacheln geben ihre Sonderbreite auf */
  .gal-item.wide,.pr-card.wide{grid-column:span 1!important}
  .gal-item.wide .gal-fig{aspect-ratio:4/3}

  /* Buttons voll breit – leichter zu treffen */
  .hero-actions,.cta-buttons,.end-btns{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.cta-buttons .btn,.end-btns .btn,.form-actions .btn{width:100%}
  .form-actions{flex-direction:column;align-items:stretch}

  /* Typo und Abstaende zuruecknehmen */
  h1{font-size:clamp(26px,7.4vw,34px)}
  h2{font-size:clamp(21px,5.6vw,27px)}
  h3{font-size:17px}
  .hero{padding:48px 0 40px}
  .hero-lede{font-size:14.5px}
  .section{padding:40px 0}
  .section-head{margin-bottom:22px}

  /* Chip-Reihen scrollen statt auf vier Zeilen umzubrechen */
  .chip-row,.gal-tools,.ov-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .chip-row::-webkit-scrollbar,.gal-tools::-webkit-scrollbar,.ov-row::-webkit-scrollbar::-webkit-scrollbar{display:none}

  /* zweite Sticky-Leiste wuerde zusammen mit dem Header den halben Screen fressen */
  .tools{position:static!important;box-shadow:none}

  /* Tier-Illustrationen an Kartenecken kleiner halten */
  .pet{transform:scale(.82);transform-origin:top right}
  .pet[style*="left"]{transform-origin:top left}

  /* Karten-Innenabstaende */
  .jrn-card,.rd-card,.gal-body,.loc-body,.form-box,.end-card,.combine-box,
  .early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-left:18px;padding-right:18px}
  .form-box,.combine-box,.early-box,.warum-showcase,.intensiv-band,.apart-band,.story-box{padding-top:26px;padding-bottom:26px}
}
@media(max-width:400px){
  .wrap{padding:0 13px}
  .stat-strip,.trust-strip{grid-template-columns:1fr!important}
  .pet{display:none}                     /* auf sehr schmalen Screens kein Platz */
}

/* Tabellen scrollen immer, statt das Layout zu sprengen */
.tbl-wrap,.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* nichts darf die Seite seitlich verschieben */
img,svg,video,iframe{max-width:100%}

/* --- Mobile Feinschliff --- */
@media(max-width:640px){
  /* min-width darf einen 100%-Button nicht ueber den Rand schieben */
  .btn,.btn-cta-lg{min-width:0}
  /* Lightbox: lange Geraetetexte muessen scrollen koennen */
  .lb-inner{max-height:94vh}
  .lb-cap{overflow-y:auto;max-height:34vh;-webkit-overflow-scrolling:touch}
  .lb-stage img{max-height:46vh}
  .lb-cap h3{font-size:19px}
  .lb-nav{width:40px;height:40px}
  /* zweite Sticky-Leiste kompakter halten */
  .tabbar{padding:9px 16px}
  .tab{padding:8px 13px;font-size:12.5px}
  /* Formularfelder: 16px verhindert Auto-Zoom in iOS Safari */
  .field input,.field select,.field textarea,.search-input{font-size:16px}
  /* Fotoleiste */
  .rail-item{height:230px}
  .rail-foot{flex-wrap:wrap;gap:10px}
  .rail-bar{max-width:none;order:3;flex-basis:100%}
}

/* ===== TERMIN MODAL (popup) ===== */
.tm-overlay{position:fixed;inset:0;z-index:500;background:rgba(20,28,10,.62);backdrop-filter:blur(3px);
            display:none;align-items:center;justify-content:center;padding:20px}
.tm-overlay.open{display:flex}
.tm-box{position:relative;background:var(--white);border-radius:22px;max-width:480px;width:100%;
        max-height:92vh;overflow-y:auto;box-shadow:0 30px 70px rgba(0,0,0,.32);animation:tmIn .25s ease}
@keyframes tmIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tm-head{background:var(--green-deepest);color:var(--white);padding:24px 26px 20px;border-radius:22px 22px 0 0;position:relative}
.tm-head h3{font-family:'Playfair Display',serif;font-size:21px;color:var(--white);margin:0 0 6px}
.tm-head p{font-size:13px;color:rgba(255,255,255,.75);margin:0}
.tm-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:none;
          background:rgba(255,255,255,.14);color:var(--white);font-size:16px;cursor:pointer;
          display:flex;align-items:center;justify-content:center;transition:all .2s}
.tm-close:hover{background:rgba(255,255,255,.28)}
.tm-body{padding:24px 26px 26px}
.tm-field{margin-bottom:14px}
.tm-field label{display:block;font-size:12.5px;font-weight:700;color:var(--green-deepest);margin-bottom:6px}
.tm-field input,.tm-field textarea{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;
       padding:12px 14px;font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
       transition:all .2s}
.tm-field input:focus,.tm-field textarea:focus{outline:none;border-color:var(--cat-main);background:var(--white);
       box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field textarea{resize:vertical;min-height:72px}
.tm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-muted);margin:16px 0 18px;line-height:1.5}
.tm-consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--cat-main)}
.tm-consent a{color:var(--cat-dark);font-weight:700}
.tm-submit{width:100%;min-height:52px;border:none;border-radius:var(--radius-btn);background:var(--gold-main);
           color:var(--green-deepest);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;
           transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.tm-submit:hover{background:var(--gold-dark);color:var(--white)}
.tm-trust{text-align:center;font-size:11.5px;color:var(--text-muted);margin-top:12px}
.tm-error{font-size:12px;color:#B0392E;margin-top:-8px;margin-bottom:12px;display:none}
.tm-error.show{display:block}

.tm-req{color:#B0392E;font-weight:700}
.tm-select-wrap{position:relative}
.tm-field select{width:100%;border:1.5px solid var(--cream-border);border-radius:12px;padding:12px 40px 12px 14px;
       font-family:inherit;font-size:15px;color:var(--text-primary);background:var(--cream-bg);
       appearance:none;-webkit-appearance:none;cursor:pointer;transition:all .2s}
.tm-field select:focus{outline:none;border-color:var(--cat-main);background:var(--white);
       box-shadow:0 0 0 3px rgba(92,138,60,.14)}
.tm-field select:invalid{color:var(--text-muted)}
.tm-select-arrow{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:18px;height:18px;
       color:var(--cat-dark);pointer-events:none}
.tm-select-arrow svg{width:100%;height:100%;display:block}
.tm-err{display:none;font-size:11.5px;color:#B0392E;margin-top:5px;line-height:1.4}
.tm-err.show{display:block}
.tm-field.invalid input,.tm-field.invalid textarea,.tm-field.invalid select{border-color:#B0392E;background:#FDF3F2}
.tm-note{font-size:11.5px;color:var(--text-muted);line-height:1.5;margin:2px 0 16px}
.tm-check svg{width:100%;height:100%}
.tm-check .tms-ring{fill:none;stroke:var(--gold-main);stroke-width:4;stroke-linecap:round;opacity:.5;
       stroke-dasharray:250;stroke-dashoffset:250;animation:tmsRing .9s ease-out forwards}
.tm-check .tms-tick{fill:none;stroke:var(--gold-main);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round;
       stroke-dasharray:60;stroke-dashoffset:60;animation:tmsTick .45s .6s cubic-bezier(.6,0,.3,1) forwards}
@keyframes tmsRing{to{stroke-dashoffset:0}}
@keyframes tmsTick{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .tm-check .tms-ring,.tm-check .tms-tick{animation:none;stroke-dashoffset:0}
}

/* success state */
.tm-success{display:none;text-align:center;padding:36px 26px 30px}
.tm-success.show{display:block}
.tm-success .tm-check{width:66px;height:66px;border-radius:50%;background:var(--gold-light);border:3px solid var(--gold-main);
       display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}
.tm-success h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--green-deepest);margin-bottom:8px}
.tm-success p{font-size:14px;color:var(--text-mid);line-height:1.6;margin-bottom:20px}
.tm-success .btn{width:100%;margin-bottom:10px}
.tm-form.hide,.tm-head.hide{display:none}

@media(max-width:480px){
  .tm-row2{grid-template-columns:1fr}
  .tm-box{border-radius:18px}
  .tm-head{border-radius:18px 18px 0 0}
}



/* ══════════════════════════════════════════════════════════════
   /ueber-uns — Ergänzungen zur Erwachsenensite.
   Grundfarbe der Marke; keine Fachbereichsfarbe, die Seite gehört
   keinem Bereich.
   ══════════════════════════════════════════════════════════════ */

.hero h1{font-size:clamp(30px,3.8vw,46px);line-height:1.2;max-width:1200px}
.hero-lede{max-width:1200px}
.section-head p{max-width:1200px}

/* Das Hinweisband oben: oranger Text auf dunklem Grund. */
.hinweis-band{background:#3A4053;color:var(--gold-main)}
.hinweis-band a{color:var(--gold-main)}
.hinweis-band a:hover{color:#FFFFFF}

/* Fließtexte der Abschnitte */
.uu-text{color:var(--text-mid);font-size:14.5px;line-height:1.75;
  max-width:1200px;margin-top:8px}
.uu-text p + p{margin-top:12px}

/* Fotos: Rechteck mit weichen Ecken. Die organische Rundung des
   Prototyps („Blob") ist Kids-Handschrift und kommt auf der
   Erwachsenensite nicht vor. Die Regeln des Prototyps setzen die Rundung
   teils am Rahmen, teils am Bild — deshalb beides überschreiben. */
.wer-photo, .wer-photo img,
.fnd-photo, .fnd-card img,
.qb-faces img, .team-chip, .team-chip img{border-radius:16px}
.wer-photo::before, .fnd-photo::before, .qb-faces img{border:none}
/* Die Portraets im Zitatband bleiben rund — dort sind es kleine
   Sprechermarken, kein Bildmotiv. */
.qb-faces img{border-radius:50%}

/* ── Teamreihe ───────────────────────────────────────────────────────── */
/* Sieben Karten in einer Reihe, wie im Prototyp.
   Zwei Fehlversuche davor: Flexbox-Regeln (wirkungslos, `.team-row` ist
   ein Raster) und eine Fassung mit fuenf Spalten. */
.team-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;margin-top:24px;justify-content:start}
.team-chip{padding:12px 8px 14px;min-width:0}
.team-chip img{aspect-ratio:1/1;object-fit:cover;object-position:top center;
  margin-bottom:8px}
.team-chip b{font-size:13px;line-height:1.25}
.team-chip span{font-size:11px;line-height:1.3}
.team-chip .tc-more{font-size:10.5px;margin-top:6px}

/* Auf schmalen Schirmen wird die Reihe wischbar statt gequetscht. */
@media(max-width:1000px){
  .team-row{grid-auto-flow:column;grid-auto-columns:132px;
    grid-template-columns:none;overflow-x:auto;scrollbar-width:none;
    padding-bottom:6px}
  .team-row::-webkit-scrollbar{display:none}
}


/* Keine organischen Bildformen auf der Erwachsenensite: Rechteck mit weichen
   Ecken. Die Regel steht HIER, weil das Seiten-Stylesheet zuletzt geladen
   wird und eine gleich starke Regel in erwachsene.css schlagen würde. */
.wel-photo img, .wer-photo img, .per-photo img,
.ansatz-photo-wrap img, .warum-photo-wrap img, .fnd-photo,
.tf-rund-bild img{border-radius:18px}
.tf-rund-bild::before{content:none}

/* ── Telefon ─────────────────────────────────────────────────────────────
   Das Telefon ist die Hauptansicht. Drei Dinge waren dort kaputt, alle von
   Alex gemeldet:

   1. Das Zitatband stellte die beiden Porträts NEBENEINANDER und schob den
      Text in eine schmale Spalte. Gewünscht: die Fotos untereinander, ein
      Drittel der Breite, das Zitat gross daneben.
   2. Die Teamkarten liefen über den rechten Rand hinaus — `minmax(152px,1fr)`
      passt bei 320 Pixeln Bildschirmbreite nicht mehr in eine Spalte.
   3. Die Gründerkarten standen zu zweit nebeneinander.

   Die Regeln stehen hier, weil das Seiten-Stylesheet zuletzt geladen wird. */
@media(max-width:900px){
  /* Fotos links als Spalte, Zitat rechts — Verhältnis ein Drittel zu zwei
     Dritteln. `align-items:start`, damit die Fotos oben bleiben. */
  .quote-band{display:grid; grid-template-columns:minmax(96px, 33%) 1fr;
              gap:20px; align-items:start; padding:26px 24px}
  .qb-faces{flex-direction:column; gap:12px; align-items:center}
  .qb-faces img{width:100%; height:auto; aspect-ratio:1/1; max-width:120px}
  /* Der Versatz gilt nur nebeneinander; untereinander würde er die Fotos
     nach links ziehen. */
  .qb-faces img + img{margin-left:0}
  .qb-text{min-width:0}
  .qb-text blockquote{font-size:18px}

  /* Gründer untereinander; in der Karte behält das Foto ein Drittel. */
  .fnd-grid{grid-template-columns:1fr}
  .fnd-card{grid-template-columns:minmax(84px, 33%) 1fr; gap:16px; padding:20px}
  .fnd-photo{width:100%}

  /* Kennzahlen zu zweit statt zu viert. */
  .st-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media(max-width:600px){
  /* Schmales Telefon: Fotos oben, Zitat darunter über die ganze Breite. */
  .quote-band{grid-template-columns:1fr; padding:22px 18px}
  .qb-faces{flex-direction:row; justify-content:flex-start; gap:0}
  .qb-faces img{width:66px; height:66px; max-width:none}
  .qb-faces img + img{margin-left:-20px}
  .qb-text blockquote{font-size:17px}

  /*
   * Gründerkarte: Foto NEBEN dem Text, auch auf dem Telefon.
   *
   * Vorher stand es darüber, mit der Begründung, nebeneinander blieben für die
   * Zeilen nur rund 140 Pixel. Das galt für ein 110px breites Foto neben
   * festem Abstand; mit einem schmaleren Foto (90px) und kleinerem Zwischenraum
   * bleiben auf 360px rund 200 Pixel für den Text — genug für drei bis vier
   * Wörter je Zeile, und die Karte ist deutlich kürzer.
   * Gewünscht von Alex am 29.09.2026.
   */
  .fnd-card{grid-template-columns:90px 1fr; gap:14px; padding:16px;
    align-items:start; justify-items:stretch}
  .fnd-photo{width:90px; max-width:none; border-width:2px}
  .fnd-card h3{font-size:16px; margin-bottom:6px}
  .fnd-card p{font-size:13px; line-height:1.55; overflow-wrap:anywhere}
  .fnd-role{font-size:10.5px}

  /* Teamkarten: zwei je Reihe, Breite gibt der Bildschirm vor. `minmax(0,1fr)`
     statt einer festen Mindestbreite — sonst schiebt die Zeile über den Rand.
     Lange Namen dürfen umbrechen. */
  .team-row{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .team-chip{padding:12px 8px 14px; min-width:0}
  .team-chip img{width:100%; max-width:96px}
  .team-chip b{font-size:13px; overflow-wrap:anywhere}
  .team-chip span{overflow-wrap:anywhere}
}

/* Auch hier: eine hohe Karte darf die Nachbarn nicht strecken. */
.team-row{align-items:start}
.fnd-grid{align-items:start}

/* ── Teamkarten: immer eine Leiste ───────────────────────────────────────
   Erst sollte die Leiste nur unter 900 Pixeln greifen. Bei einem schmalen,
   aber nicht ganz so schmalen Fenster blieb es beim Raster — die Karten
   wurden gequetscht und die Pfeile fehlten, weil sie zur Leiste gehören.
   Jetzt ist es überall eine Leiste, wie bei den Fotogalerien: Pfeile,
   Zählung, Wischen und Ziehen sind immer da, und die Karten behalten ihre
   Breite, statt sich zu verformen. */
.team-row.rail{display:flex; grid-template-columns:none; gap:14px;
               overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
               scrollbar-width:none; -ms-overflow-style:none; padding:4px 0 8px}
.team-row.rail::-webkit-scrollbar{display:none}
.team-row.rail:focus-visible{outline:3px solid var(--cat-main); outline-offset:6px; border-radius:14px}
.team-row.rail .team-chip{flex:0 0 176px; scroll-snap-align:start}

.team-wrap .rail-foot{display:flex; align-items:center; gap:12px; margin-top:14px}
.team-wrap .rail-bar{flex:1; height:6px; background:var(--cream-border);
                     border-radius:3px; overflow:hidden}

@media(max-width:600px){
  /* Auf dem Telefon zwei Karten je Bildschirm statt einer festen Breite. */
  .team-row.rail .team-chip{flex:0 0 46%; max-width:190px}
  .team-chip{padding:12px 8px 14px; min-width:0}
  .team-chip img{width:100%; max-width:96px}
  .team-chip b{font-size:13px; overflow-wrap:anywhere}
  .team-chip span{overflow-wrap:anywhere}
}


/* ──────────────────────────────────────────────────────────────────────────
   TELEFON: DAS FOTO IM ERSTEN ABSCHNITT

   Die Regel dafür steht auch in nachtraege.css — dort verliert sie aber,
   weil die Seitenstylesheets ZULETZT geladen werden und hier
   `.ansatz-photo-wrap img{height:auto}` steht. Deshalb dieselbe Regel noch einmal an
   der Stelle, an der sie gewinnt. Gemeldet von Alex am 29.09.2026:
   die Bilder blieben trotz der Änderung gross.

   Nur der Abschnitt NACH dem Titelbereich; in Karten bleibt das Bild wie es
   ist.
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .ansatz-photo-wrap,
  .wel-photo,
  .wer-photo,
  .warum-photo-wrap{
    aspect-ratio:16/9; max-height:210px; overflow:hidden; max-width:100%;
  }
  .ansatz-photo-wrap img,
  .wel-photo img,
  .wer-photo img,
  .warum-photo-wrap img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
}