/* =========================================================================
   Thomas Schneider — Webseite V3 „Hell & frisch"
   Ein Ziel · 4 Schritte · 14 Werkzeuge
   Palette: Weiß/Creme + lebendiges Teal-Grün + Slate-Blau, Anthrazit-Text
   ========================================================================= */

:root{
  --bg:            #ffffff;
  --bg-soft:       #f4f8f7;
  --bg-tint:       #eaf4f1;
  --ink:           #18212e;
  --ink-soft:      #51606f;
  --ink-faint:     #8694a1;
  --teal:          #0e9f8e;
  --teal-dark:     #0b7e70;
  --teal-soft:     #d6efe9;
  --slate:         #3b5577;
  --slate-soft:    #e5ebf2;
  --line:          #e5ece9;
  --line-soft:     #eef3f1;
  --white:         #ffffff;

  /* Schritt-Farben (dezent, harmonierend) */
  --s1: #2f9c8c;   /* Klarheit  */
  --s2: #4f8ab0;   /* Verstehen */
  --s3: #5aa977;   /* Verbessern*/
  --s4: #c2954a;   /* Tiefenwissen */

  --radius:   16px;
  --radius-s: 10px;
  --shadow:   0 18px 50px -24px rgba(20,40,60,.28);
  --shadow-s: 0 8px 24px -12px rgba(20,40,60,.22);
  --maxw:     1240px;
  --maxw-narrow: 820px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--teal-dark); text-decoration:none; }
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-.01em; margin:0; }
p{ margin:0 0 1em; }

/* ---- Layout-Helfer -------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:var(--maxw-narrow); }
section{ position:relative; }
.bg-soft{ background:var(--bg-soft); }
.bg-tint{ background:var(--bg-tint); }
.pad{ padding:104px 0; }
.pad-s{ padding:72px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-dark); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--teal); border-radius:2px; }

h2.gross{ font-size:clamp(28px,4vw,46px); font-weight:700; letter-spacing:-.02em; }
.lead-gross{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:62ch; }

/* ---- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15.5px; font-weight:600; padding:14px 26px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; transition:.22s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-dark); transform:translateY(-2px); }
.btn-arrow::after{ content:"→"; transition:transform .22s var(--ease); }
.btn-arrow:hover::after{ transform:translateX(4px); }

/* ---- Topbar --------------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 32px; height:72px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-weight:700; font-size:19px; color:var(--ink); letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:10px;
}
.brand .brand-dot{ width:11px; height:11px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.12; }
.brand-name{ font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.brand-slogan{ font-size:14px; font-weight:500; color:var(--ink-faint); letter-spacing:.01em; margin-top:3px; white-space:nowrap; }
/* Fallback ohne JS: auf schmalen Screens ausblenden. Mit JS wird die längste passende Variante gewählt (siehe Kopf-Skript). */
@media (max-width:900px){ .brand-slogan{ display:none; } }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  color:var(--ink-soft); font-weight:500; font-size:15px; padding:9px 14px; border-radius:999px;
  transition:.18s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-soft); }
.nav-links a.aktiv{ color:var(--teal-dark); }
.nav-links a.nav-cta{ background:var(--ink); color:#fff; margin-left:6px; padding:10px 20px; }
.nav-links a.nav-cta:hover{ background:var(--teal-dark); }
/* Verbundene Konzept-Gruppe „Ziel – 4 Schritte – 14 Werkzeuge" */
.nav-konzept{ display:inline-flex; align-items:center; background:var(--bg-soft); border-radius:999px; padding:1px 4px; }
.nav-konzept a{ padding:8px 11px; color:var(--ink-soft); }
.nav-konzept a:hover{ color:var(--teal-dark); background:transparent; }
.nav-konzept-sep{ color:var(--ink-faint); opacity:.55; pointer-events:none; user-select:none; font-weight:500; }
.nav-burger{ display:none; background:none; border:0; font-size:24px; color:var(--ink); cursor:pointer; }

/* ---- HERO ----------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 600px at 88% -10%, var(--teal-soft) 0%, transparent 55%),
    radial-gradient(900px 500px at -5% 110%, var(--slate-soft) 0%, transparent 50%),
    var(--bg);
}
.hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:84px 32px 92px;
  display:grid; grid-template-columns:1.05fr .95fr;
  grid-template-areas:"text visual" "text motto";
  column-gap:64px; row-gap:0; align-items:center;
}
.hero-text{ grid-area:text; }
.hero-motto{ grid-area:motto; align-self:start; margin-top:22px; }
.hero-motto-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:7px; }
.hero-motto p{ margin:0; font-size:15px; color:var(--ink-soft); font-weight:500; line-height:1.5; }
.hero-motto p b{ color:var(--slate); font-weight:600; }
.hero-eyebrow{ color:var(--slate); }
.hero-eyebrow::before{ background:var(--slate); }
.hero h1{
  font-size:clamp(34px,4.6vw,58px); font-weight:700; letter-spacing:-.025em; margin-bottom:22px;
}
.hero h1 .hl{ color:var(--teal-dark); }
.hero-sub{ font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:54ch; }
.hero-aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
/* (Slogan steht jetzt als .hero-motto unter dem Bild) */

/* Hero-Visual mit Bewegtbild */
.hero-visual{ grid-area:visual; position:relative; }
.hero-visual .visual-rahmen{
  position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow);
  background:var(--bg-soft); border:1px solid var(--line);
  aspect-ratio:4/3;
}
.hero-visual video,
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
/* Zentrierter Text-Stack in der Bildmitte — transparent, mit sanftem Licht-Schimmer */
.visual-center{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center; pointer-events:none;
  background:radial-gradient(ellipse 56% 42% at 50% 50%, rgba(250,247,242,.82) 0%, rgba(250,247,242,.45) 45%, rgba(250,247,242,0) 75%);
}
.visual-center span{
  font-size:clamp(18px,1.7vw,23px); font-weight:700; color:var(--ink); letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(250,247,242,.9);
}
@media (max-width:520px){ .visual-center{ gap:5px; } .visual-center span{ font-size:16px; } }

/* ---- TRIAS: 1 Ziel · 4 Schritte · 14 Werkzeuge --------------------------- */
.trias{
  border-top:1px solid var(--line); background:var(--bg);
}
.trias-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.trias-item{
  padding:34px 24px; text-align:center; position:relative;
  text-decoration:none; color:inherit; transition:.2s var(--ease);
}
a.trias-item{ cursor:pointer; }
a.trias-item:hover{ background:var(--bg-soft); }
a.trias-item:hover .trias-zahl{ color:var(--teal); }
a.trias-item:hover .trias-label{ color:var(--teal-dark); }
.trias-item + .trias-item{ border-left:1px solid var(--line); }
.trias-zahl{
  font-size:clamp(40px,5vw,60px); font-weight:700; color:var(--teal-dark); letter-spacing:-.03em;
  line-height:1;
}
.trias-label{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }
.trias-sub{ font-size:14px; color:var(--ink-faint); margin-top:4px; }

/* ---- ZIEL ----------------------------------------------------------------- */
.ziel-inner{ text-align:center; max-width:760px; margin:0 auto; }
.ziel-inner .eyebrow{ justify-content:center; }
.ziel-statement{
  font-size:clamp(26px,3.4vw,40px); font-weight:700; letter-spacing:-.02em; margin-bottom:22px;
}
.ziel-statement .hl{ color:var(--teal-dark); }
.ziel-pfeil{
  margin-top:30px; display:inline-flex; align-items:center; gap:10px;
  font-weight:600; color:var(--slate); font-size:15px;
}
.ziel-pfeil .pfeil-kreis{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--slate-soft);
  display:grid; place-items:center; animation:bob 1.8s var(--ease) infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ---- SCHRITTE (Steps, full-bleed alternierend) --------------------------- */
.schritte-head{ text-align:center; max-width:720px; margin:0 auto 18px; }
.schritte-head .eyebrow{ justify-content:center; }

/* Schnellnavigation zu den 4 Schritten (zweizeilige Buttons) */
.schritt-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:28px auto 0; }
.schritt-nav a{
  display:flex; flex-direction:column; align-items:center; gap:2px; min-width:140px;
  padding:12px 22px; border:1.5px solid var(--line); border-radius:14px; background:#fff;
  text-decoration:none; transition:.2s var(--ease);
}
.schritt-nav a:hover{ border-color:var(--schritt-farbe); transform:translateY(-2px); box-shadow:var(--shadow-s); }
.schritt-nav .sn-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--schritt-farbe); }
.schritt-nav .sn-name{ font-size:16px; font-weight:650; color:var(--ink); }
@media (max-width:560px){ .schritt-nav a{ min-width:0; flex:1 1 44%; padding:11px 14px; } }

.schritt{ padding:72px 0; border-top:1px solid var(--line-soft); }
.schritt:nth-child(even){ background:var(--bg-soft); }
.schritt-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.schritt:nth-child(even) .schritt-medien{ order:2; }
.schritt-kopf-nr{
  display:inline-flex; align-items:baseline; gap:12px; margin-bottom:14px;
}
.schritt-nr{
  font-size:15px; font-weight:700; letter-spacing:.1em; color:#fff;
  background:var(--schritt-farbe,var(--teal)); border-radius:999px; padding:5px 14px;
}
.schritt-kicker{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); align-self:center; }
.schritt h3{ font-size:clamp(24px,2.8vw,34px); font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.schritt-sub{ color:var(--ink-faint); font-size:15px; margin-bottom:20px; }
.schritt-frage{
  font-size:clamp(18px,1.8vw,22px); font-weight:600; color:var(--schritt-farbe,var(--teal-dark)); margin-bottom:12px;
}
.schritt-text{ color:var(--ink-soft); font-size:16.5px; max-width:54ch; }

.schritt-medien{ position:relative; }
.schritt-bild{
  margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--line); background:#fff; aspect-ratio:16/10;
}
.schritt-bild img{ width:100%; height:100%; object-fit:cover; }
.schritt-bild.kenburns img{ animation:kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.07) translate(-1.6%,-1%); } }
.schritt-medien .schritt-marke{
  position:absolute; top:-14px; left:-14px; z-index:2;
  width:54px; height:54px; border-radius:14px; background:var(--schritt-farbe,var(--teal));
  color:#fff; font-weight:700; font-size:20px; display:grid; place-items:center;
  box-shadow:var(--shadow-s);
}

/* ---- WERKZEUGE pro Schritt ----------------------------------------------- */
.werkzeuge-block{ max-width:var(--maxw); margin:28px auto 0; padding:0 32px; }
.werkzeuge-titel{
  display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;
}
.werkzeuge-titel::after{ content:""; flex:1; height:1px; background:var(--line); }
.werkzeug-karten{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;
}
.werkzeug-karte{
  text-align:left; background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  padding:18px 18px 16px; cursor:pointer; transition:.2s var(--ease); position:relative;
  display:flex; flex-direction:column; gap:5px; font-family:inherit;
}
.werkzeug-karte:hover{ border-color:var(--schritt-farbe,var(--teal)); transform:translateY(-3px); box-shadow:var(--shadow-s); }
.werkzeug-karte.aktiv{ border-color:var(--schritt-farbe,var(--teal)); box-shadow:var(--shadow-s); }
.karte-nummer{ font-size:12px; font-weight:700; color:var(--schritt-farbe,var(--teal-dark)); letter-spacing:.08em; }
.karte-name{ font-size:16.5px; font-weight:650; color:var(--ink); }
.karte-sub{ font-size:13.5px; color:var(--ink-faint); }
.werkzeug-karte::after{
  content:"+"; position:absolute; top:14px; right:16px; font-size:18px; color:var(--ink-faint);
  transition:.2s var(--ease);
}
.werkzeug-karte.aktiv::after{ content:"–"; color:var(--schritt-farbe,var(--teal-dark)); }

/* Panel */
.werkzeug-panel{
  grid-column:1 / -1; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-top:6px; padding:30px; box-shadow:var(--shadow-s); animation:panelIn .35s var(--ease);
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.werkzeug-panel[hidden]{ display:none; }
.werkzeug-panel-header{
  display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-soft);
}
/* Fester Pfeil-Cluster links — Position unabhängig von der Titellänge */
.werkzeug-panel-nav{ display:inline-flex; gap:6px; flex:none; }
.werkzeug-panel-pfeil{
  width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line); background:#fff;
  font-size:14px; color:var(--ink-soft); cursor:pointer; transition:.18s var(--ease); flex:none;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.werkzeug-panel-pfeil:hover:not(:disabled){ border-color:var(--teal); color:var(--teal-dark); background:var(--bg-soft); }
.werkzeug-panel-pfeil:disabled{ opacity:.3; cursor:default; }
.werkzeug-panel-titel{ display:flex; flex-direction:column; line-height:1.25; }
.werkzeug-panel-nr{ font-size:12px; font-weight:600; color:var(--ink-faint); letter-spacing:.06em; }
.werkzeug-panel-name{ font-size:20px; font-weight:700; color:var(--ink); }
.werkzeug-panel-header .schliessen{ margin-left:auto; border-radius:50%; width:32px; height:32px; }

.werkzeug-medien{ display:grid; grid-template-columns:1.05fr 1fr; gap:34px; align-items:center; }
.werkzeug-text .lead{ font-size:18px; color:var(--ink); font-weight:500; }
.werkzeug-text p{ color:var(--ink-soft); }
.werkzeug-bild{ margin:0; border-radius:var(--radius-s); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-s); }
.werkzeug-bild img{ width:100%; height:auto; }
.werkzeug-bild figcaption{ font-size:13.5px; color:var(--ink-faint); padding:12px 16px; background:var(--bg-soft); }

.werkzeug-nutzen{
  margin-top:26px; background:var(--bg-tint); border-radius:var(--radius-s); padding:24px 26px;
}
.werkzeug-nutzen h4{ font-size:15px; font-weight:700; color:var(--teal-dark); margin-bottom:14px; letter-spacing:.01em; }
.werkzeug-nutzen ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }
.werkzeug-nutzen li{ position:relative; padding-left:28px; font-size:15px; color:var(--ink-soft); }
.werkzeug-nutzen li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#fff; background:var(--teal);
  width:18px; height:18px; border-radius:50%; font-size:11px; display:grid; place-items:center; font-weight:700;
}

.werkzeug-navi{ margin-top:24px; display:flex; align-items:center; justify-content:center; gap:14px; }
.werkzeug-navi-dots{ display:flex; gap:7px; }
.werkzeug-navi-dot{ width:9px; height:9px; border-radius:50%; border:0; background:var(--line); cursor:pointer; transition:.18s; padding:0; }
.werkzeug-navi-dot.aktiv{ background:var(--teal); transform:scale(1.25); }
.werkzeug-navi-label{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.panel-cta{ text-align:center; margin:22px 0 0; }

/* ---- SERVICE -------------------------------------------------------------- */
.service-grid{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.service-lead{ font-size:17px; color:var(--ink-soft); margin-top:14px; }
.video-rahmen{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.video-rahmen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-legende{ font-size:13.5px; color:var(--ink-faint); margin-top:12px; text-align:center; }
.service-vorteile{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.service-vorteil{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:.2s var(--ease); }
.service-vorteil:hover{ transform:translateY(-3px); box-shadow:var(--shadow-s); border-color:var(--teal-soft); }
.service-vorteil h3{ font-size:18px; font-weight:650; margin-bottom:10px; }
.service-vorteil p{ font-size:15px; color:var(--ink-soft); margin:0; }
.service-hinweis{ text-align:center; margin-top:40px; font-size:16px; color:var(--ink-soft); }
.service-hinweis b{ color:var(--ink); }

/* ---- TERMIN --------------------------------------------------------------- */
.termin-block{
  text-align:center; max-width:680px; margin:0 auto;
  background:
    radial-gradient(700px 320px at 50% -30%, var(--teal-soft) 0%, transparent 60%),
    var(--bg);
  border:1px solid var(--line); border-radius:24px; padding:64px 40px; box-shadow:var(--shadow-s);
}
.termin-block .eyebrow{ justify-content:center; }
.termin-block h2{ font-size:clamp(26px,3.2vw,38px); font-weight:700; margin-bottom:16px; }
.termin-block p{ color:var(--ink-soft); max-width:52ch; margin-left:auto; margin-right:auto; }
.termin-block .btn{ margin-top:18px; }
.termin-block .hinweis{ font-size:13.5px; color:var(--ink-faint); margin-top:18px; }

/* ---- FOOTER --------------------------------------------------------------- */
footer{ background:var(--ink); color:#c7d2dc; padding:54px 0 34px; margin-top:0; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr; column-gap:40px; row-gap:0; }
footer h4{ color:#fff; font-size:16px; margin-bottom:14px; }
footer p{ font-size:14.5px; line-height:1.7; margin:0 0 12px; }
footer a{ color:#9fd8cf; }
footer a:hover{ color:#fff; }
.footer-brand{ display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; font-weight:700; color:#fff; font-size:18px; }
.footer-brand .brand-dot{ width:10px; height:10px; border-radius:50%; background:var(--teal); }
.impressum{ grid-column:1 / -1; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#8fa0ad; line-height:1.7; }
.impressum a{ color:#9fd8cf; }
.ki-hinweis{ grid-column:1 / -1; margin-top:8px; font-size:12px; color:#73828f; line-height:1.6; }

/* ---- Über mich (vorstellung.html) ---------------------------------------- */
.ueber{ padding:72px 0 96px; }
/* Kopf-Band: freigestelltes Portrait steht bündig auf der Unterkante des Balkens */
.ueber-band{ padding-bottom:0; }
.ueber-hero{ display:grid; grid-template-columns:300px 1fr; gap:50px; align-items:end; margin-bottom:0; }
.ueber-portrait{ align-self:end; }
.ueber-portrait img{ width:100%; height:auto; display:block; }
.ueber-hero > div:last-child{ padding-bottom:56px; }   /* Text vom Balkenrand abheben */
.ueber-hero h1{ font-size:clamp(30px,4vw,46px); font-weight:700; letter-spacing:-.02em; margin-bottom:12px; }
.ueber-leitsatz-label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark); margin:0 0 6px; }
.ueber-slogan{ color:var(--slate); font-weight:600; font-size:18px; margin-bottom:4px; }
.ueber-claim{ color:var(--teal-dark); font-weight:600; margin-bottom:16px; }
.ueber-anschrift{ font-size:14.5px; color:var(--ink-faint); margin:0; }
.ueber-aktionen{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ueber-link, .hero-link{ background:var(--teal-soft); border:0; padding:4px 12px; border-radius:8px; font:inherit; font-size:14.5px; font-weight:600; color:var(--teal-dark); cursor:pointer; text-decoration:none; }
.ueber-link::after, .hero-link::after{ content:"\00A0↗"; font-weight:700; }
.ueber-link:hover, .hero-link:hover{ background:#bfe6dd; }
.ueber-intro{ color:var(--teal-dark); font-weight:600; font-size:17px; margin:0 0 4px; }
.ueber-intro + h2{ margin-top:6px; }
.share-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:20; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px;
  display:flex; flex-direction:column;
}
.share-menu a, .share-menu button{
  text-align:left; background:none; border:0; font:inherit; color:var(--ink);
  padding:10px 12px; border-radius:8px; cursor:pointer; text-decoration:none;
}
.share-menu a:hover, .share-menu button:hover{ background:var(--bg-soft); color:var(--teal-dark); }
.share-menu.nach-oben{ top:auto; bottom:calc(100% + 8px); }
@media (max-width:760px){ .ueber-aktionen{ justify-content:center; } }
.ueber-text{ max-width:760px; }
.ueber-text h2{ font-size:clamp(21px,2.3vw,27px); font-weight:700; margin:40px 0 12px; }
.ueber-text p{ color:var(--ink-soft); font-size:16.5px; }
.cockpit-cta{
  color:var(--teal-dark); font-weight:600; text-decoration:none;
  background:var(--teal-soft); padding:1px 6px; border-radius:5px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.cockpit-cta::after{ content:"\00A0↗"; font-weight:700; }
.cockpit-cta:hover{ background:#bfe6dd; color:var(--teal-dark); }
@media (max-width:760px){
  .ueber-band{ padding-bottom:0; }
  .ueber-hero{ grid-template-columns:1fr; gap:20px; text-align:center; align-items:center; }
  .ueber-portrait{ max-width:240px; margin:0 auto; align-self:center; }
  .ueber-hero > div:last-child{ padding-bottom:40px; }
}

/* ---- Termin-Seite (termin.html) ------------------------------------------ */
.termin-seite{ padding:72px 0 96px; }
.termin-portrait{ width:150px; height:150px; margin:0 auto 14px; border-radius:50%; overflow:hidden; border:4px solid #fff; box-shadow:var(--shadow); background:var(--bg-soft); }
.termin-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.termin-portrait-zeile{ margin:0 0 28px; font-size:15px; font-style:italic; color:var(--ink-soft); }
.termin-portrait-zeile span{ font-style:normal; font-weight:600; color:var(--ink); white-space:nowrap; }
.termin-head{ text-align:center; max-width:680px; margin:0 auto 46px; }
.termin-head .eyebrow{ justify-content:center; }
.termin-head h1{ font-size:clamp(28px,3.6vw,42px); font-weight:700; letter-spacing:-.02em; margin-bottom:14px; }
.termin-head p{ color:var(--ink-soft); font-size:17px; }
.termin-optionen{ display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:980px; margin:0 auto; }
.termin-option{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; transition:.2s var(--ease); }
.termin-option:hover{ box-shadow:var(--shadow-s); transform:translateY(-3px); border-color:var(--teal-soft); }
.termin-option h3{ font-size:22px; font-weight:700; margin-bottom:10px; }
.termin-option p{ color:var(--ink-soft); font-size:15.5px; }
.termin-option .qr{ margin:24px 0; }
.termin-option .qr img{ width:200px; height:200px; border-radius:12px; border:1px solid var(--line); }
.termin-option .btn{ margin-top:auto; }
.termin-kontakt{ text-align:center; color:var(--ink-faint); margin-top:48px; font-size:15px; }
@media (max-width:760px){ .termin-optionen{ grid-template-columns:1fr; } }

/* ---- Werkzeuge-Übersicht (werkzeuge.html) -------------------------------- */
.wk-seite{ padding:64px 0 90px; }
.wk-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
.wk-head .eyebrow{ justify-content:center; }
.wk-gruppe{ margin-top:38px; }
.wk-gruppe-titel{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--schritt-farbe,var(--teal-dark));
}
.wk-gruppe-titel .nr{
  width:26px; height:26px; border-radius:8px; background:var(--schritt-farbe,var(--teal));
  color:#fff; display:grid; place-items:center; font-size:12px; flex:none;
}
.wk-gruppe-titel::after{ content:""; flex:1; height:1px; background:var(--line); }
.wk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.wk-kachel{
  position:relative; display:flex; flex-direction:column; gap:5px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); padding:18px 18px 16px;
  text-decoration:none; transition:.2s var(--ease);
}
.wk-kachel:hover{ border-color:var(--schritt-farbe,var(--teal)); transform:translateY(-3px); box-shadow:var(--shadow-s); }
.wk-kachel .nr{ font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--schritt-farbe,var(--teal-dark)); }
.wk-kachel .name{ font-size:16.5px; font-weight:650; color:var(--ink); }
.wk-kachel .sub{ font-size:13.5px; color:var(--ink-faint); }
.wk-kachel::after{ content:"→"; position:absolute; top:15px; right:16px; color:var(--ink-faint); transition:.2s var(--ease); }
.wk-kachel:hover::after{ color:var(--schritt-farbe,var(--teal-dark)); transform:translateX(3px); }

/* ---- Lesbarkeit: lange Fließtexte immer linksbündig ----------------------- */
/* Überschriften, Eyebrows, Kacheln, Bildlegenden u. Ä. bleiben zentriert;
   nur die mehrzeiligen Absätze werden linksbündig (bessere Lesbarkeit, v. a. mobil). */
.ziel-inner .lead-gross,
.schritte-head .lead-gross,
.wk-head .lead-gross,
.termin-head > p:not(.termin-portrait-zeile),
.termin-block > p{ text-align:left; }

/* ---- Scroll-Reveal -------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.sichtbar{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .nav-links{
    position:absolute; top:72px; right:0; left:0; flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); padding:10px 18px 18px; gap:2px;
    box-shadow:var(--shadow-s); display:none;
  }
  .nav-links.offen{ display:flex; }
  .nav-links a{ padding:13px 12px; border-radius:var(--radius-s); }
  .nav-links a.nav-cta{ margin-left:0; margin-top:6px; text-align:center; }
  .nav-burger{ display:block; }

  .hero-inner{ grid-template-columns:1fr; grid-template-areas:"visual" "text" "motto"; gap:38px; padding:54px 24px 64px; }
  .hero-motto{ margin-top:0; }
  .trias-inner{ grid-template-columns:1fr; }
  .trias-item + .trias-item{ border-left:0; border-top:1px solid var(--line); }
  .schritt-grid{ grid-template-columns:1fr; gap:30px; }
  .schritt:nth-child(even) .schritt-medien{ order:-1; }
  .schritt-medien{ order:-1; }
  .werkzeug-medien{ grid-template-columns:1fr; gap:22px; }
  .werkzeug-nutzen ul{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr; gap:32px; }
  .service-vorteile{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
  .wrap,.topbar-inner,.hero-inner,.trias-inner,.schritt-grid,.werkzeuge-block,.footer-inner{ padding-left:22px; padding-right:22px; }
  .pad{ padding:72px 0; }
}
@media (max-width:520px){
  .hero h1{ font-size:30px; }
  .werkzeug-panel{ padding:20px; }
  .termin-block{ padding:44px 22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .schritt-bild img{ transition:none; }
}