/* =====================================================================
   therapiepraxis-amp (Karlsruhe) – amp-startseite.css
   Version: v9  ·  2026-08-17  —  AMP-START v9, vor Go-Live Marker entfernen
   ---------------------------------------------------------------------
   Startseiten-Layer: Hero mit Rundgang-Video + drei Fachbereich-Karten
   (Wegweiser) + komplette Intro-Choreographie aus dem Konzept
   (amp-startseite.html v15), 1:1 uebertragen.

   Konventionen:
   - ALLE Klassen mit amp-Praefix -> kollidiert nicht mit Bootstrap
     (.row, .card, .btn bleiben unberuehrt). Datei kann site-weit laden.
   - Schrift wird NICHT gesetzt -> erbt Roboto aus dem Theme.
   - Video, Poster, Veil und Mobile-Splash injiziert therapiepraxis-amp.js
     v2 (Sanitizer strippt <video>/<svg>/<script> aus CEs).
   - Choreographie laeuft nur mit body.amp-anim (setzt JS). Ohne JS oder
     bei prefers-reduced-motion rendert die Seite sofort final.
   ---------------------------------------------------------------------
   Changelog:
   v9 – KSC-Karte optisch auf die Kick-Zeile "Karriere" der linken
         Spalte ausgerichtet (margin-top 14px, Sichtwert — bei Bedarf
         nachjustieren).
   v8 – KSC-Karte kompakt statt gestreckt: height:100% entfernt (klebte
         als volle Spalte am Termin-Band), Ausrichtung oben in der Spalte.
   v7 – Karriere/KSC auf Theme-Zweispalter umgestellt: zwei getrennte
         CEs in einer Backend-Zeile statt eigener Grid-Wrapper.
         .amp-jobs-stack (Stellen gestapelt in halber Spaltenbreite),
         .ksc-banner fuellt die Spaltenhoehe.
   v6 – KSC-Karte elastisch: Innenabstand, Schrift und Logobreite
         skalieren mit der Spaltenbreite (clamp), kein fester Platzbedarf
         mehr — passt sich kompakt in den Zweispalter ein.
   v5 – KSC-Banner in die Karriere-Sektion integriert: Zweispalter,
         links Ueberschrift + Stellen (gestapelt), rechts KSC-Karte
         (KSC-Blau #004b93, weisses 1C-Logo). CE 7 und CE 9 zu einem
         CE zusammengelegt, eigenstaendiges CE 9 entfaellt.
   v4 – (verworfen) KSC als Abschluss-Band vor dem Footer.
   v3 – Schritt B: alle uebrigen Sektionen (Trustbar, Interdisziplinaer/
         Fallbeispiel, Termin-Band, Anfahrt, Karriere, Info) + Utility
         .amp-full fuer Vollbreite neuer Sektionen. Ueberschriften als
         h3/h4 (Praxis-Vorgabe), Groessen kommen aus den Klassen.
   v2 – Vollbreite fuer Hero + Ways aktiviert (CEs haengen im .container
         der Seitenvorlage); Frame-Reset greift jetzt auch bei
         verschachtelten Theme-Wrappern (frame-inner); overflow-x:clip
         auf body gegen den 100vw-Scrollbalken.
   v1 – Ausgangsfassung: Tokens, Triline, Buttons, Hero, Ways, Intro.
   ===================================================================== */

:root{
  /* Marke */
  --amp-orange:#EA5B0C; --amp-orange-d:#C44A07; --amp-green:#20794d;
  /* Disziplin-Farben (Wegeleitsystem) */
  --amp-physio:#EA5B0C;
  --amp-ergo:var(--amp-green);
  --amp-logo:#7A4FA8;
  /* Neutrale */
  --amp-ink:#26221d; --amp-muted:#6b645c; --amp-line:rgba(38,34,29,.13);
  --amp-surf:#f7f4ef; --amp-radius:7px; --amp-maxw:1180px;
}

/* ---------- Frame-Reset: CE-Rahmen um Hero/Ways ohne Abstaende,
   damit die Karten den Hero ueberlappen koennen. Nachfahren-Selektor,
   weil das Theme zwischen .frame und Inhalt noch Wrapper rendert. ---------- */
.frame:has(.amp-hero),
.frame:has(.amp-ways){
  margin:0 !important; padding:0 !important;
}
.frame:has(.amp-hero) > *,
.frame:has(.amp-ways) > *{
  margin:0; padding:0;
}
/* 100vw-Ausbruch erzeugt sonst einen horizontalen Scrollbalken in
   Scrollbreiten-Hoehe; clip statt hidden -> position:sticky bleibt intakt */
body{ overflow-x:clip; }
/* Vollbreite: CEs haengen im .container der Seitenvorlage, Hero und
   Karten brechen daraus aus; .amp-wrap zentriert den Inhalt auf 1180px */
.amp-hero,
.amp-ways{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- Signatur: Drei-Linien-Motiv (Physio / Ergo / Logo) ----------
   Ein einziges Element (Sanitizer-sicher, keine leeren Kind-Spans),
   Farben als harter Verlauf. */
.amp-triline{
  display:inline-block; width:120px; height:6px; border-radius:3px;
  overflow:hidden; font-size:0; line-height:0; vertical-align:middle;
  background:linear-gradient(90deg,
    var(--amp-physio) 0 33.33%,
    var(--amp-ergo) 33.33% 66.66%,
    var(--amp-logo) 66.66% 100%);
}
.amp-triline-wide{ width:100%; height:8px; border-radius:0; display:block; }

/* ---------- Layout-Helfer ---------- */
.amp-wrap{ max-width:var(--amp-maxw); margin:0 auto; padding:0 22px; }

/* ---------- Buttons ---------- */
.amp-btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px;
  border-radius:10px; font-weight:600; text-decoration:none; font-size:16px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.amp-btn i{ font-size:18px; }
.amp-btn:hover{ text-decoration:none; }
.amp-btn-primary{ background:var(--amp-orange); color:#fff; }
.amp-btn-primary:hover{ background:var(--amp-orange-d); color:#fff; transform:translateY(-1px); }
.amp-btn-white{ background:#fff; color:var(--amp-ink); }
.amp-btn-white:hover{ color:var(--amp-ink); transform:translateY(-1px); }
.amp-btn:focus-visible,
.amp-way:focus-visible{ outline:3px solid var(--amp-orange); outline-offset:2px; }

/* =====================================================================
   HERO mit Praxis-Rundgang-Video
   Video/Poster/Veil kommen per JS als erste Kinder von .amp-hero.
   ===================================================================== */
.amp-hero{
  position:relative; overflow:hidden; background:#2a2520;
  min-height:clamp(440px,62vh,560px); display:flex; align-items:center;
}
.amp-hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity .8s ease; pointer-events:none;
}
.amp-hero-video.amp-is-playing{ opacity:1; }
/* Poster deckt schwarzen Videostart, verschwindet sobald Video laeuft */
.amp-hero-poster{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:1; transition:opacity .6s ease;
}
.amp-hero-poster.amp-gone{ opacity:0; }
.amp-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(24,20,16,.42);
}
.amp-hero > .amp-wrap{
  position:relative; z-index:2; width:100%;
  padding-top:54px; padding-bottom:54px;
}
.amp-veil{
  display:none; position:absolute; inset:0; background:#fff; z-index:4;
  pointer-events:none; transition:opacity 1.1s ease;
}
body.amp-veil-out .amp-veil{ opacity:0; visibility:hidden; }

.amp-eyebrow{
  display:inline-flex; align-items:center; gap:10px; color:#fff;
  font-size:13px; letter-spacing:.05em; font-weight:600; margin-bottom:18px;
}
.amp-hero-title{
  color:#fff; font-size:clamp(30px,5.6vw,48px); font-weight:600;
  line-height:1.18; margin:0; max-width:680px;
}
.amp-hero-title em{ font-style:normal; color:#fff; }
.amp-hero-lead{
  color:rgba(255,255,255,.92); font-size:18px; max-width:520px;
  margin:16px 0 26px;
}
.amp-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.amp-note{
  margin:18px 0 0; font-size:14px; color:rgba(255,255,255,.75);
  display:flex; align-items:center; gap:7px;
}

/* =====================================================================
   DREI WEGE (Disziplin-Karten) — ueberlappen den Hero um 34 px
   ===================================================================== */
.amp-ways{ padding:24px 0 0; position:relative; z-index:5; transform:translateY(-34px); }
.amp-ways-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.amp-way{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--amp-line); border-radius:var(--amp-radius);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 6px 22px rgba(38,34,29,.06);
}
.amp-way:hover{
  transform:translateY(-4px); box-shadow:0 16px 38px rgba(38,34,29,.13);
  text-decoration:none; color:inherit;
}
/* Farbige Kopfzone — hier lebt die Farbe, gebuendelt an einem Ort */
.amp-way-head{
  background:var(--amp-c); padding:22px 24px;
  display:flex; align-items:center; gap:14px;
}
.amp-way-ic{
  width:50px; height:50px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18);
}
.amp-way-ic img{ width:28px; height:28px; display:block; border-radius:0; }
.amp-way-title{
  font-size:22px; color:#fff; margin:0; line-height:1.15; font-weight:600;
}
/* Ruhiger Koerper: nur kurzer Text, alles neutral */
.amp-way-body{ padding:20px 24px 22px; display:flex; flex-direction:column; flex:1; }
.amp-way-who{ font-size:15.5px; color:var(--amp-muted); margin:0; }
.amp-way-more{
  margin-top:16px; font-size:14.5px; font-weight:600; color:var(--amp-c);
  display:inline-flex; align-items:center; gap:6px;
}
.amp-way-physio{ --amp-c:var(--amp-physio); }
.amp-way-ergo{ --amp-c:var(--amp-ergo); }
.amp-way-logo{ --amp-c:var(--amp-logo); }

/* Anker-Sprung "Unsere Fachbereiche": Platz fuer die Sticky-Navbar */
#fachbereiche{ scroll-margin-top:140px; }

/* =====================================================================
   INTRO-CHOREOGRAPHIE (nur body.amp-anim, setzt JS)
   Desktop: Seite startet OHNE Hero, drei Karten fallen ein, dann waechst
   der Hero auf und schiebt den Content hinunter, Video aus dem Weiss.
   ===================================================================== */
@keyframes ampWayIntro{
  0%{opacity:0;transform:translateY(-46px);}
  60%{opacity:1;}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes ampHeroGrow{
  from{height:0;}
  to{height:clamp(440px,62vh,560px);}
}
@keyframes ampWaysShift{ from{transform:translateY(0);} to{transform:translateY(-34px);} }

@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  body.amp-anim .amp-hero{
    height:0; min-height:0; overflow:hidden;
    animation:ampHeroGrow 1.4s cubic-bezier(.45,0,.2,1) 3.4s both;
  }
  body.amp-anim .amp-veil{ display:block; opacity:1; }
  body.amp-anim .amp-ways{ animation:ampWaysShift 1.4s cubic-bezier(.45,0,.2,1) 3.4s both; transform:translateY(0); }
  body.amp-anim .amp-way{ animation:ampWayIntro 1.15s cubic-bezier(.16,.84,.34,1) both; }
  body.amp-anim .amp-ways-grid .amp-way:nth-child(1){ animation-delay:.4s; }
  body.amp-anim .amp-ways-grid .amp-way:nth-child(2){ animation-delay:.95s; }
  body.amp-anim .amp-ways-grid .amp-way:nth-child(3){ animation-delay:1.5s; }
  /* Hero-Text bleibt verborgen, bis das Video wirklich sichtbar ist
     (body.amp-reveal setzt JS) */
  body.amp-anim .amp-eyebrow,
  body.amp-anim .amp-hero-title,
  body.amp-anim .amp-hero-lead,
  body.amp-anim .amp-cta,
  body.amp-anim .amp-note{
    opacity:0; transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  body.amp-anim.amp-reveal .amp-eyebrow{ opacity:1; transform:none; }
  body.amp-anim.amp-reveal .amp-hero-title{ opacity:1; transform:none; transition-delay:.15s; }
  body.amp-anim.amp-reveal .amp-hero-lead{ opacity:1; transform:none; transition-delay:.3s; }
  body.amp-anim.amp-reveal .amp-cta{ opacity:1; transform:none; transition-delay:.45s; }
  body.amp-anim.amp-reveal .amp-note{ opacity:1; transform:none; transition-delay:.6s; }
}

/* ---------- Mobile Intro: Splash-Overlay UEBER der ganzen Seite ----------
   Markup injiziert JS (nur <760px und body.amp-anim). Liegt fixed ueber
   allem (auch Header) -> kann nicht abgeschnitten werden. */
.amp-splash{ display:none; }
@media (max-width:759px){
  body.amp-anim.amp-intro .amp-splash{
    display:flex; position:fixed; inset:0; z-index:2000; background:#fff;
    flex-direction:column; justify-content:center; gap:14px; padding:26px 22px;
    transition:opacity .9s ease;
  }
  body.amp-veil-out .amp-splash{ opacity:0; pointer-events:none; }
  .amp-sp-head{
    text-align:center; font-weight:600; font-size:15px; color:var(--amp-muted);
    margin:0 0 6px; opacity:0; animation:ampWayIntro .5s ease both .15s;
  }
  .amp-sp-tile{
    position:relative; overflow:hidden; background:#fff; border-radius:7px;
    box-shadow:0 10px 30px rgba(38,34,29,.16);
    opacity:0; animation:ampWayIntro 1.1s cubic-bezier(.16,.84,.34,1) both;
  }
  .amp-sp-tile .amp-sp-ic{
    width:46px; height:46px; border-radius:9px; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--amp-c); color:#fff;
  }
  .amp-sp-tile .amp-sp-ic svg{ width:26px; height:26px; }
  .amp-sp-tile .amp-sp-title{ font-size:20px; margin:0; color:var(--amp-ink); font-weight:600; }
  .amp-sp-row{
    display:flex; align-items:center; gap:13px; padding:16px 18px;
    border-left:6px solid var(--amp-c);
  }
  .amp-sp-tile p{ font-size:14px; color:var(--amp-muted); padding:0 18px 16px; margin:0; }
  .amp-sp-physio{ --amp-c:var(--amp-physio); }
  .amp-sp-ergo{ --amp-c:var(--amp-ergo); }
  .amp-sp-logo{ --amp-c:var(--amp-logo); }
  .amp-splash .amp-sp-tile:nth-of-type(2){ animation-delay:.5s; }
  .amp-splash .amp-sp-tile:nth-of-type(3){ animation-delay:1.2s; }
  .amp-splash .amp-sp-tile:nth-of-type(4){ animation-delay:1.9s; }
}
.amp-noanim *{ transition:none !important; animation:none !important; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .amp-btn:hover,.amp-way:hover{ transform:none; }
  .amp-hero-video{ display:none; }
  .amp-hero-video.amp-is-playing{ opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:759px){
  /* Hero: feste, vorab reservierte Hoehe -> kein Springen */
  .amp-hero{ min-height:0; height:52vh; height:52dvh; }
  .amp-hero > .amp-wrap{ padding-top:30px; padding-bottom:30px; }
  .amp-eyebrow,.amp-note{ display:none; }        /* nur Headline + Text + Telefon */
  .amp-cta a:nth-child(2){ display:none; }        /* zweite Taste mobil weg */
  .amp-cta .amp-btn{ width:auto; color:var(--amp-orange); font-size:18px; padding:14px 26px; }
  .amp-cta .amp-btn .amp-btn-label{ display:none; } /* nur Hoerer + Nummer */
  /* Kompakte Karten mobil */
  .amp-way-head{ padding:16px 18px; gap:12px; }
  .amp-way-ic{ width:42px; height:42px; }
  .amp-way-title{ font-size:19px; }
  .amp-way-body{ padding:14px 18px 16px; }
  .amp-way-who{ font-size:14px; }
  .amp-way-more{ display:none; }
  .amp-ways{ transform:translateY(-22px); }
  .amp-ways-grid{ gap:12px; }
}
@media (min-width:760px){
  .amp-ways-grid{ grid-template-columns:repeat(3,1fr); }
}


/* =====================================================================
   SEKTIONEN — Schritt B  · v3 · 2026-08-17
   Reihenfolge auf der Startseite:
   Hero -> Ways -> Trustbar -> Interdisziplinaer -> News-Anriss (EXT:news,
   bestehendes Plugin-CE) -> Termin-Band -> Anfahrt -> Karriere -> Info
   ===================================================================== */

/* ---------- Utility: Vollbreite + Frame-Reset fuer neue Sektionen ---------- */
.amp-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.frame:has(.amp-full){ margin:0 !important; padding:0 !important; }
.frame:has(.amp-full) > *{ margin:0; padding:0; }

/* ---------- Grundraster ---------- */
.amp-block{ padding:52px 0; }
.amp-sec-surf{ background:var(--amp-surf); }
.amp-sec-head{ max-width:660px; margin-bottom:30px; }
.amp-kick{
  display:inline-flex; align-items:center; gap:10px; font-size:13px;
  color:var(--amp-muted); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:10px;
}
.amp-sec-title{
  font-size:clamp(24px,3.4vw,31px); font-weight:600; line-height:1.18;
  margin:0; color:var(--amp-ink);
}
.amp-sec-head p{ color:var(--amp-muted); font-size:16.5px; margin:12px 0 0; }

/* ---------- Trustbar ---------- */
.amp-trustbar{ padding:34px 0; margin-top:18px; }
.amp-trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.amp-ti{ display:flex; gap:11px; align-items:flex-start; font-size:15.5px; line-height:1.45; }
.amp-ti i{ color:var(--amp-orange); font-size:22px; flex:none; }

/* ---------- Interdisziplinaer: Ein Befund, ein Team ---------- */
.amp-team-grid{ display:grid; grid-template-columns:1fr; gap:26px; align-items:start; }
.amp-case{
  background:#fff; border:1px solid var(--amp-line);
  border-radius:var(--amp-radius); padding:26px;
}
.amp-case-title{ font-size:18.5px; font-weight:600; margin:0 0 14px; color:var(--amp-ink); }
.amp-step{ display:flex; gap:13px; padding:11px 0; align-items:flex-start; }
.amp-step + .amp-step{ border-top:1px dashed var(--amp-line); }
.amp-dot{ width:11px; height:11px; border-radius:50%; flex:none; margin-top:6px; }
.amp-step b{ display:block; font-size:15.5px; }
.amp-step span span{ font-size:14.5px; color:var(--amp-muted); display:block; }
.amp-d-physio{ background:var(--amp-physio); }
.amp-d-ergo{ background:var(--amp-ergo); }
.amp-d-logo{ background:var(--amp-logo); }

/* ---------- Termin-Band ---------- */
.amp-band{ background:var(--amp-orange); color:#fff; padding:42px 0; position:relative; overflow:hidden; }
.amp-band-grid{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:22px; position:relative; z-index:1;
}
.amp-band-title{ color:#fff; font-size:clamp(22px,3vw,27px); font-weight:600; margin:0 0 8px; }
.amp-band p{ color:#ffe3d2; font-size:16px; max-width:480px; margin:0; }

/* ---------- Anfahrt ---------- */
.amp-find-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.amp-find-card{
  background:#fff; border:1px solid var(--amp-line);
  border-radius:var(--amp-radius); padding:24px;
}
.amp-find-title{
  font-size:18.5px; font-weight:600; display:flex; align-items:center;
  gap:9px; margin:0 0 12px; color:var(--amp-ink);
}
.amp-find-title i{ color:var(--amp-orange); font-size:21px; }
.amp-find-card p{ font-size:15.5px; color:var(--amp-muted); margin:0; }
.amp-find-card p + p{ margin-top:12px; }
.amp-find-card strong{ color:var(--amp-ink); }
.amp-find-card a{ color:var(--amp-orange); font-weight:600; text-decoration:none; }
.amp-find-card a:hover{ color:var(--amp-orange-d); }

/* ---------- Karriere ---------- */
.amp-jobs{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px; }
.amp-job{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--amp-line); border-radius:6px;
  padding:16px 18px; text-decoration:none; color:inherit;
  transition:transform .15s ease, border-color .15s ease;
}
.amp-job:hover{ transform:translateY(-2px); border-color:var(--amp-c); color:inherit; text-decoration:none; }
.amp-job b{ display:flex; align-items:center; gap:11px; font-size:16.5px; }
.amp-job b::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--amp-c); flex:none; }
.amp-job i{ color:var(--amp-c); font-size:19px; }
.amp-job-physio{ --amp-c:var(--amp-physio); }
.amp-job-ergo{ --amp-c:var(--amp-ergo); }
.amp-job-logo{ --amp-c:var(--amp-logo); }

/* ---------- Info (Oeffnungszeiten / Kontakt) ---------- */
.amp-info-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.amp-info-card{
  background:#fff; border:1px solid var(--amp-line);
  border-radius:var(--amp-radius); padding:24px;
}
.amp-info-title{
  font-size:18.5px; font-weight:600; display:flex; align-items:center;
  gap:8px; margin:0 0 14px; color:var(--amp-ink);
}
.amp-info-title i{ color:var(--amp-orange); }
.amp-irow{ display:flex; justify-content:space-between; font-size:15.5px; padding:7px 0; gap:14px; }
.amp-irow + .amp-irow{ border-top:1px solid var(--amp-line); }
.amp-info-card a{ color:var(--amp-orange); font-weight:600; text-decoration:none; }
.amp-info-card a:hover{ color:var(--amp-orange-d); }
.amp-info-small{ font-size:14px; color:var(--amp-muted); margin:10px 0 0; }

/* ---------- Responsive Schritt B ---------- */
@media (max-width:759px){
  .amp-block{ padding:40px 0; }
  .amp-band .amp-cta, .amp-band .amp-cta .amp-btn{ width:100%; }
  .amp-band .amp-cta .amp-btn{ justify-content:center; }
}
@media (min-width:760px){
  .amp-trust-grid{ grid-template-columns:repeat(4,1fr); }
  .amp-find-grid{ grid-template-columns:1.2fr 1fr; }
  .amp-info-grid{ grid-template-columns:1fr 1fr; }
  .amp-jobs{ grid-template-columns:repeat(3,1fr); }
  .amp-job{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (min-width:1000px){
  .amp-team-grid{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .amp-job:hover{ transform:none; }
}


/* =====================================================================
   KARRIERE-ZWEISPALTER + KSC-KARTE  · v5 · 2026-08-17
   Links: Ueberschrift + Stellen gestapelt. Rechts: KSC-Karte
   "Mitglied im 1894-Netzwerk" (KSC-Blau = bewusstes Partner-Branding).
   CSS hier statt <style> im CE (Sanitizer).
   ===================================================================== */
.amp-karriere-grid{ display:grid; grid-template-columns:1fr; gap:26px; align-items:stretch; }
/* Stellen im Zweispalter: immer gestapelt, Zeilenlayout wie mobil */
.amp-karriere-grid .amp-jobs{ grid-template-columns:1fr; }
.amp-karriere-grid .amp-job{ flex-direction:row; align-items:center; gap:12px; }
.ksc-banner{
  background-color:#004b93;
  color:#fff;
  border-radius:var(--amp-radius);
  padding:clamp(1.1rem,2.5vw,1.75rem) clamp(1rem,2.2vw,1.5rem);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-width:0;                       /* darf im Grid schrumpfen */
}
.ksc-banner .ksc-title{
  color:#fff;
  font-size:clamp(17px,1.8vw,21px);
  font-weight:600;
  margin:0 0 10px;
}
.ksc-banner p{
  text-wrap:balance;
  margin:0 0 .85rem;
  font-size:clamp(13.5px,1.3vw,15.5px);
  color:rgba(255,255,255,.92);
  max-width:36ch;
}
.ksc-banner p:last-child{ margin-bottom:0; }
.ksc-banner a{ display:inline-block; line-height:0; max-width:100%; }
.ksc-banner img{
  width:clamp(150px,60%,220px);      /* Logo skaliert mit der Karte */
  max-width:100%;
  height:auto;
  display:inline-block;
}
@media (min-width:1000px){
  .amp-karriere-grid{ grid-template-columns:1.6fr 1fr; }
}
/* v7: Theme-Zweispalter statt eigenem Grid — Stellen gestapelt,
   Zeilenlayout unabhaengig vom 3-Spalten-Raster der Vollbreite */
.amp-jobs-stack{ grid-template-columns:1fr !important; }
.amp-jobs-stack .amp-job{ flex-direction:row; align-items:center; gap:12px; }
.ksc-banner{ height:auto; align-self:flex-start; margin-top:14px; }