@charset "UTF-8";

/* ====== Grundlayout ====== */
:root{--bg:#0f3d44;--fg:#e8f3f5;--muted:#b8d0d4;--brand:#79e2c5;--surface:#124b54;--border:#1f5e68;--header-bg:#0b6b52;--header-fg:#f1f8f6;--footer-bg:#0c2f34;--footer-fg:#e6f1f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);background:var(--bg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif}
.container{width:min(1100px,92vw);margin-inline:auto;padding-inline:1rem}
/* Header & Navigation */
.site-header{background:#fff;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border)}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding-block:.75rem;gap:1rem}
.brand{display:flex;flex-direction:column;line-height:1.1}.brand-top{font-size:.85rem;color:var(--muted)}.brand strong{font-size:1.1rem}
.nav-toggle{display:none;border:1px solid var(--border);background:var(--surface);padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.nav-list{display:flex;gap:.75rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-list a{display:block;padding:.5rem .75rem;border-radius:.5rem;text-decoration:none;color:var(--fg)}
.nav-list a[aria-current="page"]{background:var(--surface);font-weight:600}.nav-list a:hover{background:color-mix(in srgb,var(--brand) 10%,#fff)}
/* Hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:1rem;margin-block:1.5rem}
.placeholder{display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:.75rem;aspect-ratio:16/9;background:var(--surface)}
.placeholder.small{aspect-ratio:4/3}.placeholder figcaption{color:var(--muted)}
/* Intro */
.intro{padding-block:1.25rem 2rem}.intro h1{font-size:clamp(1.5rem,2vw + 1rem,2.2rem);margin:0 0 .5rem}.signatur{font-style:italic;color:var(--muted)}
/* Footer */
.site-footer{border-top:1px solid var(--border);background:#fff}.footer-meta{padding:1.25rem 1rem}
.footer-meta p{text-align:center;margin:0 0 .5rem}.footer-links{list-style:none;display:flex;gap:3rem;justify-content:center;padding:0;margin:.25rem 0 0}
.footer-links a{color:var(--fg);text-decoration:none}.footer-links a:hover{color:var(--brand)}
/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem;border:1px dashed var(--brand);border-radius:.5rem}
/* Responsive */
@media (max-width:820px){.nav-toggle{display:inline-block}.nav-list{display:none}.nav-list.offcanvas{display:flex;flex-direction:column;margin-top:.5rem}.hero{grid-template-columns:1fr}.placeholder.wide{order:-1}}
/* Ãœber uns */
.page-intro{padding-block:1.5rem .5rem}.page-intro .lead{font-size:1.05rem;color:var(--fg)}
.text-cols{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;align-items:start;margin-block:1rem 1.5rem}
.gallery{display:grid;grid-template-columns:1fr;gap:1rem}.ph{background:var(--surface);border:2px dashed var(--border);border-radius:.75rem;min-height:160px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.gallery .ph{min-height:140px}.text-block{margin-block:1.25rem}.header-link-color{color:var(--header-fg)}
.section-with-gallery__content{display:grid;gap:1.25rem}
.section-with-gallery__content .text-block{margin:0}
.section-divider{border:0;border-top:1px solid var(--border);margin-block:2rem 1rem}
.cv{margin-block:1rem 3rem}
.cv-header{display:grid;grid-template-columns:250px 1fr;gap:0.5rem;align-items:left;margin-bottom:1rem}
.cv-photo{aspect-ratio:1/1}.eyebrow{letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;color:var(--muted);margin:0 0 .25rem}
.subtitle{color:var(--muted);margin:.25rem 0 0}
.timeline{position:relative;margin:1rem 0 1.5rem;padding-left:1rem}.timeline::before{content:"";position:absolute;left:.4rem;top:0;bottom:0;width:2px;background:var(--border)}
.t-item{display:grid;grid-template-columns:120px 1fr;gap:.75rem 1.5rem;padding:.5rem 0 .5rem 0;position:relative}
.t-item::before{content:"";position:absolute;left:.3rem;top:1.1rem;width:.6rem;height:.6rem;background:#fff;border:2px solid var(--brand);border-radius:50%}
.t-year{font-weight:600;color:var(--fg)}.t-text{color:var(--fg)}.trainings ul{padding-left:1.2rem;margin:.25rem 0 0}.trainings li{margin:.3rem 0}
@media (max-width:820px){
  .text-cols{grid-template-columns:1fr}
  .section-with-gallery__content{gap:1rem}

  /* Porträtspalte auf Mobile größer & flexibel */
  .cv-header{
    grid-template-columns: clamp(120px, 30vw, 170px) 1fr;
    gap:.75rem;
    align-items:center;
  }

  .t-item{grid-template-columns:100px 1fr}
}
@media (max-width:480px){
  .cv-header{grid-template-columns:1fr; text-align:center}
  .cv-photo{width:min(240px,70vw); margin-inline:auto}
}

/* Praxis cards & subnav */
.subnav{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.25rem}
.pill{display:inline-block;padding:.5rem .9rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;color:var(--fg);background:#fff}
.pill:hover{border-color:color-mix(in srgb,var(--brand) 60%,var(--border))}.pill.active{background:color-mix(in srgb,var(--brand) 8%,#fff);border-color:var(--brand);font-weight:600}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:.9rem;overflow:hidden;background:#fff;transition:transform .05s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}.card-media{min-height:160px}.card-body{padding:1rem}.card-body h2{margin:.1rem 0 .25rem;font-size:1.15rem}
@media (max-width:820px){.card-grid{grid-template-columns:1fr}}
/* Callout */
.callout{border:1px solid var(--border);border-radius:.9rem;padding:1rem 1.1rem;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.03);margin:1rem 0}
.callout h2{margin:.1rem 0 .5rem;font-size:1.15rem}.feature-list{margin:.5rem 0 0;padding-left:1.2rem}.feature-list li{margin:.35rem 0}
/* Kontakt */
.contact-center{display:flex;justify-content:center;margin:1rem 0 1.2rem}
.big-phone{font-size:clamp(1.8rem,3vw + 1rem,2.4rem);font-weight:600;letter-spacing:.02em;margin:.5rem 0}
.big-phone a {
  color: #0f3d44;
  background: var(--brand);
  padding: .2em .5em;
  border-radius: .4em;
  text-decoration: none;
}

.big-phone a:hover {
  background: color-mix(in srgb, var(--brand) 80%, black);
}

.big-phone a:hover {
  color: color-mix(in srgb, var(--brand) 70%, #fff);
}.big-phone a:hover{color:var(--brand)}
.map-section{margin:1rem 0 2rem;text-align:center}.map-caption{color:var(--muted);margin:.25rem 0 .5rem}
.map-embed{width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:.9rem;overflow:hidden;background:var(--surface)}
.map-embed iframe{width:100%;height:100%;border:0}.map-link a{text-decoration:none}.map-link a:hover{color:var(--brand)}
/* Modal */
.modal{border:none;border-radius:1rem;padding:0;width:min(880px,92vw)}.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);background:#fff;border-top-left-radius:1rem;border-top-right-radius:1rem}
.modal-head h2{margin:0;font-size:1.1rem}.modal-content{padding:1rem 1.25rem;max-height:70vh;overflow:auto;background:#fff;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}
.close-btn{font-size:1.2rem;line-height:1;border:1px solid var(--border);background:var(--surface);padding:.25rem .55rem;border-radius:.5rem;cursor:pointer}.close-btn:hover{background:#fff}

body.theme-petrol{--bg:#0f3d44;--fg:#e8f3f5;--muted:#b8d0d4;--surface:#124b54;--border:#1f5e68;--brand:#73e3db;background:var(--bg);color:var(--fg)}
body.theme-petrol .section-divider{border-top-color:var(--border)}
body.theme-petrol .placeholder{background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:var(--border);color:var(--muted)}
body.theme-petrol .callout{background:rgba(255,255,255,.04);border-color:var(--border);box-shadow:none}

/* === Global petrol theme adjustments === */
/* Keep header/footer dark-on-white for readability */
.site-header, .site-header .nav-list a{color:#1b1b1b}
.site-footer, .site-footer a{color:#1b1b1b}
.site-footer a:hover{color:var(--brand)}

/* Components that sit on white backgrounds should use dark text */
.card{color:#1b1b1b}
.pill{color:#1b1b1b}
.callout{color:#1b1b1b}

/* === Themed header & footer (petrol/green) === */
.site-header{background:var(--header-bg);color:var(--header-fg);border-bottom:1px solid color-mix(in srgb,var(--header-fg) 12%,var(--header-bg));box-shadow:0 2px 8px rgba(0,0,0,.15)}
.site-header .brand,.site-header .brand strong,.site-header .brand .brand-top{color:var(--header-fg)}
.site-header .nav-toggle{border-color:color-mix(in srgb,var(--header-fg) 30%,transparent);background:color-mix(in srgb,var(--header-bg) 85%,black);color:var(--header-fg)}
.site-header .nav-list a{color:var(--header-fg);opacity:.95}
.site-header .nav-list a:hover{background:color-mix(in srgb,var(--brand) 30%,transparent)}
.site-header .nav-list a[aria-current="page"]{background:color-mix(in srgb,var(--header-fg) 12%,transparent)}

@media (max-width:820px){
  .site-header .nav-list.offcanvas{background:color-mix(in srgb,var(--header-bg) 92%,black);border:1px solid color-mix(in srgb,var(--header-fg) 18%,var(--header-bg));padding:.5rem;border-radius:.75rem}
}

.site-footer{background:var(--footer-bg);color:var(--footer-fg);border-top:1px solid color-mix(in srgb,var(--footer-fg) 12%,var(--footer-bg))}
.site-footer a{color:var(--footer-fg)}
.site-footer a:hover{color:var(--brand)}
.footer-meta p{color:var(--footer-fg)}
.footer-links a{color:var(--footer-fg)}


/* === Themed callout on petrol background === */
.callout{
  background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.callout h2{color: var(--fg)}


/* === Praxis: themed cards & pills (match callout) === */
.card{
  background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%);
  color: var(--fg);
  border-color: var(--border);
}
.card .card-body h2,
.card .card-body p{ color: var(--fg); }
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
}

.pill{
  background: color-mix(in srgb, var(--surface) 80%, var(--bg) 20%);
  color: var(--fg);
  border-color: var(--border);
}
.pill:hover{
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%);
}
.pill.active{
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  color: var(--fg);
}



/* === Slider (Startseite) === */
.hero.hero--slider-only{display:block}
.slider{position:relative; border-radius:.75rem; overflow:hidden; aspect-ratio:16/9; background:var(--surface)}
.slider .slides{width:100%; height:100%; display:flex; translate:0 0; transform:translateX(0); transition:transform .6s ease}
.slider .slides img{width:100%; height:100%; object-fit:cover; flex:0 0 100%; display:block}
.slider--large .slides img{object-fit:contain}
.slider .ctrl{position:absolute; top:50%; translate:0 -50%; border:1px solid color-mix(in srgb,var(--header-fg) 25%, var(--header-bg)); background:color-mix(in srgb,var(--header-bg) 92%, black); color:var(--header-fg); padding:.3rem .6rem; border-radius:.6rem; cursor:pointer; opacity:.9}
.slider .ctrl:hover{background:color-mix(in srgb,var(--brand) 25%, var(--header-bg))}
.slider .prev{left:.5rem}.slider .next{right:.5rem}
.slider .dots{position:absolute; left:0; right:0; bottom:.5rem; display:flex; gap:.35rem; justify-content:center}
.slider .dots button{width:.55rem; height:.55rem; border-radius:999px; border:1px solid var(--border); background:color-mix(in srgb, var(--surface) 50%, transparent); padding:0; cursor:pointer}
.slider .dots button[aria-selected="true"]{background:var(--brand); border-color:var(--brand)}
@media (max-width:820px){ .slider{aspect-ratio:auto} }


/* === Header Dropdown: Praxis === */
.has-submenu{position:relative}
.has-submenu::after{content:"";position:absolute;left:0;top:100%;width:100%;height:.45rem;}
.submenu-toggle{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:none; border:none;
  color:var(--header-fg);
  padding:.5rem .75rem;
  border-radius:.5rem;
  cursor:pointer;
  font:inherit;
  opacity:.95
}
.submenu-toggle:hover{background:color-mix(in srgb,var(--brand) 30%, transparent)}
.submenu-toggle[aria-current="page"]{
  background:color-mix(in srgb,var(--header-fg) 12%, transparent);
  font-weight:600
}
.submenu{
  list-style: none;   /* ← neu: Punkte weg */
  margin: 0;          /* ← neu: Standard-Abstand weg */
  padding-left: 0;    /* ← neu: Einrückung weg */

  position:absolute;
  left:0;
  top:calc(100% + .45rem);
  display:none;
  min-width:290px;
  padding:.35rem;
  background:color-mix(in srgb,var(--header-bg) 96%, black);
  border:1px solid color-mix(in srgb,var(--header-fg) 18%, var(--header-bg));
  border-radius:.65rem;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  z-index:2000;
}
.submenu a{
  display:block;
  padding:.55rem .75rem;
  border-radius:.55rem;
  color:var(--header-fg);
  text-decoration:none;
}
.submenu a:hover{background:color-mix(in srgb,var(--brand) 30%, transparent)}
/* Desktop hover/focus opens menu */
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu{display:block}

/* Mobile (off-canvas): click opens, submenu becomes inline */
@media (max-width:820px){
  .site-header .nav-list.offcanvas .has-submenu{width:100%}
  .site-header .nav-list.offcanvas .submenu{
    position:static;
    display:none;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:.25rem 0 .5rem 1rem;
    min-width:auto
  }
  .site-header .nav-list.offcanvas .has-submenu.open > .submenu{display:block}
  .submenu-toggle{
    width:100%;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between
  }
  .submenu-toggle::after{content:"\25BE"; opacity:.9}
}


/* Medien-Styling für echte Bilder */
.media{display:block; border:0; background:none; border-radius:.75rem; overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover; display:block}
.media.wide{aspect-ratio:16/9}
.media.small{aspect-ratio:4/3}
.cv-photo{border-radius:.75rem; overflow:hidden}
.cv-photo img{width:100%; height:100%; object-fit:cover; display:block}


/* Links im Seiteninhalt (main) */
main a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: .15em;
}

main a:hover{
  color: color-mix(in srgb, var(--brand) 70%, #fff);
}

main a:visited{
  color: color-mix(in srgb, var(--brand) 55%, var(--fg));
}