/* Seitenregeln aus dem abgenommenen Prototyp team-martin-weissensteiner.html,
   unveraendert uebernommen. */
/* ===== PERSONENSEITE ===== */
.per-hero{display:grid;grid-template-columns:230px 1fr;gap:38px;align-items:center}
.per-photo{position:relative;overflow:visible}
.per-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:48% 52% 45% 55%/50% 42% 58% 50%;
               border:5px solid rgba(255,255,255,.5)}
.per-photo::before{content:'';position:absolute;width:78px;height:78px;border-radius:50%;background:var(--gold-main);
                   bottom:-12px;right:-10px;z-index:-1;opacity:.8}
.per-fach{display:inline-flex;align-items:center;gap:8px;background:var(--cat-main);color:var(--green-deepest);
          font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:7px 16px;border-radius:20px}
.per-hero h1{margin:14px 0 8px}
.per-role{font-size:17px;color:rgba(255,255,255,.82);font-weight:600}
.per-motto{margin-top:18px;padding-left:18px;border-left:4px solid var(--gold-main);
           font-family:'Playfair Display',serif;font-style:italic;font-size:21px;color:var(--gold-main);line-height:1.45}

/* two-column body */
.per-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start}
.per-main > section{margin-bottom:32px}
.per-main h2{font-size:24px;margin-bottom:14px;position:relative;padding-left:16px}
.per-main h2::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;background:var(--cat-main)}
.per-main p{color:var(--text-mid);font-size:14.5px;line-height:1.75}

/* education */
.edu-row{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--white);
         border:1px solid var(--cream-border);border-left:5px solid var(--cat-main);border-radius:14px;padding:18px 20px}
.edu-year{font-family:'Playfair Display',serif;font-weight:700;font-size:16px;color:var(--cat-dark);white-space:nowrap;
          background:var(--cat-light);padding:6px 13px;border-radius:20px}
.edu-row b{display:block;font-size:15.5px;color:var(--green-deepest);line-height:1.35}
.wb-label{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin:22px 0 10px}
.wb-tags{display:flex;flex-wrap:wrap;gap:8px}
.wb-tag{background:var(--white);border:1px solid var(--cream-border);border-radius:20px;padding:7px 14px;
        font-size:13px;color:var(--text-mid);transition:all .2s}
.wb-tag:hover{border-color:var(--cat-main);color:var(--cat-deeptext);background:var(--cat-light)}

/* specialisation */
.spez-row{display:flex;flex-wrap:wrap;gap:10px}
.spez{display:inline-flex;align-items:center;gap:8px;background:var(--cat-light);border:1.5px solid var(--cat-main);
      color:var(--cat-deeptext);border-radius:20px;padding:9px 16px;font-size:14px;font-weight:700}

/* sidebar */
.per-side{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:16px}
.side-card{position:relative;background:var(--white);border:1px solid var(--cream-border);border-radius:18px;padding:22px 22px}
.side-card h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.side-list{display:flex;flex-direction:column;gap:9px}
.side-pill{display:inline-flex;align-items:center;gap:9px;background:var(--cream-bg);border:1px solid var(--cream-border);
           border-radius:14px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--green-deepest);transition:all .22s}
.side-pill:hover{border-color:var(--cat-main);background:var(--cat-light);color:var(--cat-deeptext)}
.side-pill.fach{background:var(--cat-light);border-color:var(--cat-main);color:var(--cat-deeptext)}
.side-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--cat-main);flex-shrink:0}
.side-cta{background:linear-gradient(135deg,var(--gold-light) 0%,var(--white) 60%);border:2px solid var(--gold-main);
          border-radius:18px;padding:24px 22px;position:relative;overflow:visible;box-shadow:0 12px 30px rgba(196,154,40,.15)}
.side-cta h3{color:var(--gold-deeptext)}
.side-cta p{font-size:14px;color:var(--text-mid);line-height:1.55;margin-bottom:14px}
.side-cta .btn{width:100%}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--cat-dark);
           border:1.5px solid var(--cream-border);background:var(--white);border-radius:22px;padding:11px 18px;
           min-height:46px;transition:all .22s}
.back-link:hover{border-color:var(--cat-main);background:var(--cat-light);gap:11px}

@media(max-width:900px){
  .per-hero{grid-template-columns:1fr;gap:24px;text-align:center}
  .per-photo{max-width:200px;margin:0 auto}
  .per-motto{text-align:left}
  .per-grid{grid-template-columns:1fr}
  .per-side{position:static}
}

/* ============================================================
   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}
}



/* ══════════════════════════════════════════════════════════════
   Vorlage team-detail — Ergänzungen zur Erwachsenensite.
   Farbe: der Fachbereich der Person, hier Physiotherapie.
   ══════════════════════════════════════════════════════════════ */

:root{
  --cat-main:#91ABDA; --cat-dark:#4A6FA5; --cat-light:#EDF1F7;
  --cat-mid:#C3D1E7;  --cat-deeptext:#2E4A73;
}

/* ──────────────────────────────────────────────────────────────────────────
   FARBE DES FACHBEREICHS

   Die Werte in `:root` sind die des Prototyps und gelten als Rückfall. Auf der
   Seite setzt `fachrichtung_farbschicht()` (colors.php) sie neu — dieselbe
   Datei bedient alle Fachbereiche. Deshalb stehen in den Regeln darunter keine
   festen Farbwerte mehr, sondern die Variablen: sonst bleibt jede Seite in der
   Farbe des Prototyps stehen. Gemeldet von Alex am 18.09.2026.
   ────────────────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--cat-dark) 0%,var(--cat-deeptext) 70%)}
.hero-badge, .per-fach{background:var(--cat-main);
  color:color-mix(in srgb, var(--cat-deeptext) 85%, #000)}
h1, h2, h3{color:var(--cat-deeptext)}
.per-role{color:rgba(255,255,255,.85)}
.per-motto{border-left-color:var(--gold-main);color:var(--gold-main)}

/* 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}

/* Porträt: Rechteck mit weichen Ecken, keine ovale Form. */
.per-photo img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 44px -22px rgba(20,32,52,.6)}

/* Terminkasten der Seitenspalte im Orange der Marke statt Kids-Gold. */
.side-cta{background:linear-gradient(135deg,#FDF0E7 0%,var(--white) 60%);
  border-color:var(--gold-main);
  box-shadow:0 12px 30px -14px rgba(236,126,65,.45)}

/* Der gelbe Kreis lag hinter der unteren rechten Ecke des Porträts. Mit
   dem rechteckigen Bild sah es aus, als wäre dort die Hand abgeschnitten.
   Er sitzt jetzt oben links, wo nur Hintergrund ist. */
.per-photo::before{bottom:auto;right:auto;top:-14px;left:-16px;
  width:64px;height:64px;opacity:.55}


/* 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 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;
  }
}

/* Die Kontaktzeilen können lang sein (lange Adresse, lange Anschrift). In der
   schmalen Seitenspalte müssen sie umbrechen dürfen, sonst schieben sie die
   Spalte über den Rand. 29.09.2026 */
.side-pill{overflow-wrap:anywhere}