/**********************
  HERO (#fd-hero)
**********************/
#fd-hero{
  --ink:#111; --muted:#444; --bg-top:#fff; --bg-mid:#fff; --bg-bottom:#f9fafb;
  --stroke:#eee; --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; color:var(--ink); border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 55%,var(--bg-bottom) 100%);
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  box-sizing:border-box; overflow:clip; isolation:isolate;
}
#fd-hero .fd-container{
  max-width:1200px; margin:0 auto; padding:72px 20px 64px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (min-width:901px){
  .ast-header-break-point #fd-hero .fd-container{ padding-top:108px; }
}
/* Typo */
#fd-hero h1{ font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.15; margin:0 0 14px; }
#fd-hero .fd-sub{ font-size:clamp(1rem,1.4vw,1.2rem); color:var(--muted); margin:0 0 18px; max-width:50ch; font-weight:500; }
#fd-hero .fd-intro{ font-size:clamp(1rem,1.4vw,1.125rem); color:var(--muted); margin:0 0 24px; max-width:55ch; }
/* Badges */
#fd-hero .fd-badges{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px; padding:0; list-style:none; }
#fd-hero .fd-badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:#222;
  background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:8px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
}
#fd-hero .fd-badge:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--ink); }
#fd-hero .fd-badge .icon{ color:var(--ok); }
/* CTAs & Buttons */
#fd-hero .fd-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
#fd-hero a, #fd-hero .btn{ text-decoration:none !important; }
#fd-hero .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
#fd-hero .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); }
#fd-hero .btn:hover{ transform:translateY(-2px); }
#fd-hero .btn.primary{
  background:#111; color:#fff; border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
#fd-hero .btn.primary .icon path{ stroke:#fff; }
#fd-hero .btn.primary:hover{ background:var(--accent); color:#111; }
#fd-hero .btn.primary:hover .icon path{ stroke:#111; }
#fd-hero .btn.secondary{ background:#fff; color:#111; border:1px solid var(--stroke); }
#fd-hero .btn.secondary:hover{ border-color:var(--accent); }
/* Icons */
#fd-hero .icon{ width:18px; height:18px; }
#fd-hero .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Media */
#fd-hero .fd-media{
  position:relative; aspect-ratio:16/11; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.06); display:grid; place-items:center;
}
#fd-hero .fd-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
#fd-hero .fd-media:hover img{ transform:scale(1.02); }
#fd-hero .fd-media figcaption{
  position:absolute; left:10px; bottom:10px; font-size:.85rem;
  background:rgba(255,255,255,.9); border:1px solid var(--stroke); padding:6px 10px; border-radius:10px;
  backdrop-filter:saturate(1.1) blur(4px);
}
/* Responsive */
@media (max-width:900px){
  #fd-hero .fd-container{ grid-template-columns:1fr; padding:64px 20px 48px; gap:28px; }
  #fd-hero .fd-media{ order:-1; }
}
@media (max-width:600px){
  #fd-hero .fd-container{ padding:56px 16px 40px; }
  #fd-hero .btn{ width:100%; }
}
/* Reveal */
#fd-hero .reveal{ opacity:0; transform:translateY(12px); }
#fd-hero .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #fd-hero .reveal, #fd-hero .fd-media img{ transition:none !important; }
}


/**********************
  LEISTUNGEN (#leistungen)
**********************/
#leistungen{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink);
  border-bottom:1px solid var(--stroke);
}
#leistungen::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
  background:var(--bg, #fff); z-index:-1;
}
#leistungen[data-variant="white"]{ --bg:#fff; }
#leistungen[data-variant="soft"]{ --bg:var(--soft); }
#leistungen .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
:where(#leistungen) h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 10px; letter-spacing:.2px; }
:where(#leistungen) .intro{ color:var(--muted); max-width:70ch; margin:0 0 26px; }
#leistungen .grid{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
@media (max-width:640px){ #leistungen .grid{ grid-template-columns:1fr; } }
#leistungen .card{
  position:relative; background:#fff; border:1px solid var(--stroke); border-radius:14px;
  padding:18px; display:flex; flex-direction:column; gap:10px; height:100%;
  transition:transform .18s, box-shadow .25s, border-color .25s, background .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.03); text-decoration:none; color:inherit;
}
#leistungen .card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.08); border-color:#ddd; }
#leistungen .card:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35), 0 12px 26px rgba(0,0,0,.08); }
#leistungen .card h3{ font-size:1.1rem; margin:0; }
#leistungen .card p{ margin:0; color:var(--muted); }
#leistungen .features{ margin:6px 0 4px; padding:0; list-style:none; display:grid; gap:6px; }
#leistungen .features li{ display:flex; align-items:center; gap:8px; color:#333; font-size:.98rem; }
/* Icons */
#leistungen .icon{ width:20px; height:20px; flex:0 0 auto; color:var(--ink); }
#leistungen .icon path,#leistungen .icon circle,#leistungen .icon rect,#leistungen .icon polyline,#leistungen .icon line{
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
#leistungen .features .icon{ color:var(--ok); }
/* „Mehr …“-Zeile */
#leistungen .learn{
  margin-top:auto; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  color:var(--ink); text-decoration:none;
  transition:color .25s, box-shadow .25s;
}
#leistungen .learn .arrow{ width:18px; height:18px; }
#leistungen .learn .arrow path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#leistungen .learn:hover{ color:var(--accent); }
#leistungen .learn:hover .arrow path{ stroke:var(--accent); }
#leistungen .learn:focus-visible{ text-decoration:underline; text-underline-offset:2px; }
/* CTA unten */
#leistungen .cta-row{ display:flex; justify-content:center; gap:12px; margin-top:28px; }
/* Buttons lokal */
#leistungen .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  text-decoration:none;
}
#leistungen .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:12px; }
#leistungen .btn:hover{ transform:translateY(-2px); }
#leistungen .btn.primary{
  background:#111; color:#fff; border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
#leistungen .btn.primary .icon path{ stroke:#fff; }
#leistungen .btn.primary:hover{ background:var(--accent); color:#111; }
#leistungen .btn.primary:hover .icon path{ stroke:#111; }
/* Reveal */
#leistungen .reveal{ opacity:0; transform:translateY(12px); }
#leistungen .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #leistungen .reveal,#leistungen .card,#leistungen .btn{ transition:none !important; }
}


/**********************
  ÜBER MICH (#ueber-mich)
**********************/
#ueber-mich{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink);
  border-bottom:1px solid var(--stroke);
}
#ueber-mich::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
  background:var(--bg,#f9fafb); z-index:-1;
}
#ueber-mich[data-variant="soft"]{ --bg:var(--soft); }
#ueber-mich[data-variant="white"]{ --bg:#fff; }
#ueber-mich .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
#ueber-mich .grid{
  display:grid; gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:center;
}
@media (max-width:900px){ #ueber-mich .grid{ grid-template-columns:1fr; } }
/* Typo */
:where(#ueber-mich) h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 8px; letter-spacing:.2px; }
:where(#ueber-mich) .kicker{ color:var(--muted); margin:0 0 16px; }
:where(#ueber-mich) .lead{ font-size:clamp(1rem,1.4vw,1.125rem); color:var(--muted); margin:0 0 18px; max-width:60ch; }
:where(#ueber-mich) .body{ color:var(--muted); margin:0 0 20px; max-width:70ch; }
/* CTAs (Buttons wie HERO) */
#ueber-mich .cta-row{ margin:8px 0 20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }
#ueber-mich .cta-row .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  text-decoration:none;
}
#ueber-mich .cta-row .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:12px; }
#ueber-mich .cta-row .btn:hover{ transform:translateY(-2px); }
#ueber-mich .cta-row .btn.primary{
  background:#111; color:#fff; border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
#ueber-mich .cta-row .btn.primary .icon path{ stroke:#fff; }
#ueber-mich .cta-row .btn.primary:hover{ background:var(--accent); color:#111; }
#ueber-mich .cta-row .btn.primary:hover .icon path{ stroke:#111; }
/* Sekundär */
#ueber-mich .cta-row .btn.secondary{ background:#fff; color:#111; border:1px solid var(--stroke); }
#ueber-mich .cta-row .btn.secondary:hover{ border-color:var(--accent); }
/* Badges */
#ueber-mich .badges{ display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 22px; padding:0; list-style:none; }
#ueber-mich .badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:#222;
  background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:8px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
}
#ueber-mich .badge:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--ink); }
#ueber-mich .badge .icon{ color:var(--ok); }
/* Prozess */
#ueber-mich .process{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0 24px; }
@media (max-width:700px){ #ueber-mich .process{ grid-template-columns:1fr; } }
#ueber-mich .step{
  background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:14px;
  display:flex; gap:10px; align-items:flex-start;
}
#ueber-mich .step h3{ margin:0 0 4px; font-size:1rem; }
#ueber-mich .step p{ margin:0; color:var(--muted); font-size:.95rem; }
#ueber-mich .step .icon{ color:var(--ink); }
/* Icons */
#ueber-mich .icon{ width:20px; height:20px; flex:0 0 auto; color:var(--ink); }
#ueber-mich .icon path,#ueber-mich .icon circle,#ueber-mich .icon rect,#ueber-mich .icon polyline,#ueber-mich .icon line{
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
/* Foto */
#ueber-mich figure.photo{
  position:relative; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
#ueber-mich figure.photo img{
  width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:4/5;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
#ueber-mich figure.photo:hover img{ transform:scale(1.02); }
#ueber-mich figure.photo figcaption{
  position:absolute; left:10px; bottom:10px; font-size:.85rem;
  background:rgba(255,255,255,.9); border:1px solid var(--stroke);
  padding:6px 10px; border-radius:10px; backdrop-filter:saturate(1.1) blur(4px);
}
/* Reveal */
#ueber-mich .reveal{ opacity:0; transform:translateY(12px); }
#ueber-mich .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #ueber-mich .reveal, #ueber-mich figure.photo img, #ueber-mich .btn{ transition:none !important; }
}


/**********************
  PORTFOLIO (#portfolio)
**********************/
#portfolio{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink); border-bottom:1px solid var(--stroke);
}
#portfolio::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw;
  transform:translateX(-50%); background:var(--bg,#fff); z-index:-1;
}
#portfolio[data-variant="white"]{ --bg:#fff; }
#portfolio .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
:where(#portfolio) h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 10px; letter-spacing:.2px; }
:where(#portfolio) .intro{ color:var(--muted); max-width:70ch; margin:0 0 22px; font-size:1.05rem; }
#portfolio .grid{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
@media (max-width:960px){ #portfolio .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ #portfolio .grid{ grid-template-columns:1fr; } }
#portfolio .card{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .25s, border-color .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
#portfolio .card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.08); border-color:#ddd; }
#portfolio .thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
#portfolio .card-content{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
#portfolio .card h3{ margin:0; font-size:1.1rem; }
#portfolio .desc{ margin:0; color:var(--muted); font-size:.98rem; }
/* Text-Button */
#portfolio .proj-btn{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink);
  text-decoration:none; transition:color .25s, box-shadow .25s;
}
#portfolio .proj-btn:hover{ color:var(--accent); }
#portfolio .proj-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:8px; }
/* Icons */
#portfolio .arrow{ width:18px; height:18px; }
#portfolio .arrow path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#portfolio .icon{ width:18px; height:18px; }
#portfolio .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* CTA unten */
#portfolio .cta{ margin-top:30px; text-align:center; }
#portfolio .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:700; line-height:1;
  transition:transform .18s, background .25s, color .25s, box-shadow .25s, border-color .25s;
  text-decoration:none;
}
#portfolio .btn:hover{ transform:translateY(-2px); }
#portfolio .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:12px; }
#portfolio .btn.primary{ background:#111; color:#fff; border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08); }
#portfolio .btn.primary .icon path{ stroke:#fff; }
#portfolio .btn.primary:hover{ background:var(--accent); color:#111; }
#portfolio .btn.primary:hover .icon path{ stroke:#111; }
/* Reveal */
#portfolio .reveal{ opacity:0; transform:translateY(12px); }
#portfolio .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #portfolio .reveal, #portfolio .card, #portfolio .btn{ transition:none !important; }
}


/**********************
  FAQ (#faq)
**********************/
#faq{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink);
  border-bottom:1px solid var(--stroke);
}
#faq::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
  background:var(--bg, var(--soft)); z-index:-1;
}
#faq[data-variant="soft"]{ --bg:var(--soft); }
#faq[data-variant="white"]{ --bg:#fff; }
#faq .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
#faq h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 12px; letter-spacing:.2px; }
#faq .intro{ color:var(--muted); max-width:70ch; margin:0 0 24px; }
/* Liste */
#faq .faqlist{ display:grid; gap:12px; }
#faq details{
  background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:14px 16px;
  transition:box-shadow .25s, border-color .25s, background .25s;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
#faq details:hover{ border-color:#ddd; box-shadow:0 12px 26px rgba(0,0,0,.08); }
#faq details[open]{ border-color:#ddd; box-shadow:0 12px 26px rgba(0,0,0,.08); }
/* Fragezeile */
#faq summary{
  cursor:pointer; list-style:none; font-weight:700; display:flex; align-items:center; gap:10px;
  outline:none; padding:4px 0; -webkit-tap-highlight-color:transparent; -webkit-text-fill-color:currentColor;
}
#faq summary::-webkit-details-marker{ display:none; }
#faq summary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:10px; }
/* Toggle */
#faq .toggle{ width:18px; height:18px; position:relative; flex:0 0 auto; color:currentColor; }
#faq .toggle::before, #faq .toggle::after{
  content:""; position:absolute; inset:0; margin:auto; background:currentColor;
  width:18px; height:2px; border-radius:2px;
}
#faq .toggle::after{ transform:rotate(90deg); transition:transform .25s ease; }
#faq details[open] .toggle::after{ transform:rotate(0deg); }
#faq details p{ margin:10px 0 0; color:var(--muted); }
/* Reveal */
#faq .reveal{ opacity:0; transform:translateY(12px); }
#faq .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #faq .reveal, #faq details, #faq .toggle::after{ transition:none !important; }
}


/**********************
  KONTAKT (#kontakt)
**********************/
#kontakt{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink);
  border-bottom:1px solid var(--stroke);
}
#kontakt::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
  background:var(--bg,#fff); z-index:-1;
}
#kontakt[data-variant="white"]{ --bg:#fff; }
#kontakt[data-variant="soft"]{ --bg:var(--soft); }
#kontakt .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
#kontakt h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 10px; letter-spacing:.2px; }
#kontakt .intro{ color:var(--muted); max-width:70ch; margin:0 0 24px; }
/* Grid */
#kontakt .grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:32px; align-items:start;
}
@media (max-width:900px){ #kontakt .grid{ grid-template-columns:1fr; } }
/* Info-Card */
#kontakt .info{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
#kontakt .info p{ margin:0 0 10px; color:var(--muted); }
#kontakt .info .meta{ font-size:.95rem; color:#333; }
#kontakt .info .meta a{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; }
#kontakt .info .meta a:hover{ color:var(--accent); }
/* Form-Card */
#kontakt form{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
#kontakt .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ #kontakt .row{ grid-template-columns:1fr; } }
#kontakt label{ font-weight:600; display:inline-block; margin:0 0 6px; }
#kontakt .hint{ font-size:.9rem; color:var(--muted); margin-left:6px; font-weight:500; }
/* Inputs */
#kontakt input[type="text"],
#kontakt input[type="email"],
#kontakt input[type="tel"],
#kontakt select,
#kontakt textarea{
  width:100%; padding:12px 12px; border:1px solid var(--stroke); border-radius:10px;
  background:#fff; color:var(--ink); box-sizing:border-box; font:inherit;
  -webkit-text-fill-color:currentColor; transition:border-color .2s, box-shadow .25s, background .25s; appearance:none;
}
#kontakt ::placeholder{ color:#777; opacity:1; }
#kontakt select{ min-height:46px; line-height:1.3; }
#kontakt textarea{ min-height:140px; resize:vertical; }
/* Fokus */
#kontakt input:focus-visible,
#kontakt select:focus-visible,
#kontakt textarea:focus-visible{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,106,0,.20);
}
/* Themen-Pills */
#kontakt .topics{ display:flex; flex-wrap:wrap; gap:10px; }
#kontakt .topics input{ position:absolute; opacity:0; inset:auto; width:1px; height:1px; }
#kontakt .pill{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:#222;
  background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:8px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  transition:transform .18s, box-shadow .25s, border-color .25s, background .25s;
  cursor:pointer; user-select:none;
}
#kontakt .pill .icon{ width:18px; height:18px; color:var(--ok); }
#kontakt .pill .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#kontakt .pill:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--ink); }
#kontakt .topics input:focus-visible + .pill{ box-shadow:0 0 0 3px rgba(255,106,0,.35); }
#kontakt .topics input:checked + .pill{ border-color:var(--ok); }
/* DSGVO-Zeile */
#kontakt .checkline{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--muted); }
#kontakt .checkline input{ margin-top:3px; }
#kontakt .checkline a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
#kontakt .checkline a:hover{ color:var(--accent); }
/* Actions */
#kontakt .actions{ margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
#kontakt .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  cursor:pointer; border:1px solid transparent; background:#111; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
#kontakt .btn:hover{ transform:translateY(-2px); background:var(--accent); color:#111; }
#kontakt .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); }
#kontakt .btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }
/* Status */
#kontakt .status{ font-size:.95rem; color:var(--muted); }
/* Reveal */
#kontakt .reveal{ opacity:0; transform:translateY(12px); }
#kontakt .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  #kontakt .reveal, #kontakt .btn, #kontakt input, #kontakt select, #kontakt textarea{ transition:none !important; }
}


/**********************
  FOOTER (#fd-footer)
**********************/
#fd-footer{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb; --accent:#ff6a00;
  --soc-bg:#f2f3f5; --soc-border:#e6e6e6;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink); border-top:1px solid var(--stroke);
}
#fd-footer *, #fd-footer *::before, #fd-footer *::after{ box-sizing:border-box; }
#fd-footer::before{ content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--bg,var(--soft)); z-index:-1; }
#fd-footer[data-variant="soft"]{ --bg:var(--soft); }
#fd-footer[data-variant="white"]{ --bg:#fff; }
#fd-footer .wrap{ max-width:1200px; margin:0 auto; padding:48px 20px; }
#fd-footer h2{ font-size:clamp(1.2rem,2.2vw,1.6rem); margin:0 0 8px; }
#fd-footer .intro{ color:var(--muted); margin:0 0 18px; }
/* Grid */
#fd-footer .grid{ display:grid; grid-template-columns:1.2fr .9fr .9fr .9fr; gap:24px; align-items:start; text-align:left; }
#fd-footer .grid > *{ margin:0; padding:0; }
#fd-footer .col, #fd-footer .brand{ display:flex; flex-direction:column; justify-content:flex-start; padding:0; }
@media (max-width:900px){ #fd-footer .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ #fd-footer .grid{ grid-template-columns:1fr; } }
/* Brand */
#fd-footer .brand{ gap:12px; }
#fd-footer .brand .claim{ color:var(--muted); margin:0; max-width:45ch; }
/* Überschriften */
#fd-footer .col h3{ font-size:1rem; margin:0 0 10px; letter-spacing:.2px; }
/* Linklisten Reset */
#fd-footer .col ul.links,
#fd-footer nav.col ul.links{
  list-style:none !important;
  margin:0 !important; padding:0 !important;
  margin-inline-start:0 !important; padding-inline-start:0 !important; -webkit-padding-start:0 !important;
  display:flex; flex-direction:column; gap:8px;
}
#fd-footer .col ul.links li{ list-style:none !important; margin:0 !important; padding:0 !important; display:block; }
#fd-footer .col ul.links a{
  display:block; margin:0 !important; padding:0 !important;
  color:var(--ink); text-decoration:none !important; transition:color .25s;
}
#fd-footer .col ul.links a:hover{ color:var(--accent); }
/* Links mit Icons */
#fd-footer .links .with-icon{ display:flex; align-items:center; gap:10px; }
#fd-footer .links .with-icon .icon{ width:18px; height:18px; color:var(--muted); flex:0 0 18px; }
#fd-footer .links .with-icon .icon path,
#fd-footer .links .with-icon .icon circle,
#fd-footer .links .with-icon .icon line{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Social Icons */
#fd-footer .socials{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap; }
#fd-footer .soc{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:var(--soc-bg); color:#222; border:1px solid var(--soc-border);
  text-decoration:none !important;
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
#fd-footer .soc:hover{ transform:translateY(-1px); background:#fff; color:#ff6a00; border-color:#f0b28a; box-shadow:0 6px 18px rgba(0,0,0,.06); }
#fd-footer .soc:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.25); }
#fd-footer .soc .icon{ width:18px; height:18px; color:currentColor; }
#fd-footer .soc .icon path, #fd-footer .soc .icon rect, #fd-footer .soc .icon circle{
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
#fd-footer .soc.icon-only .visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Bottom bar (sticky) */
#fd-footer .bar{ margin-top:24px; padding-top:18px; border-top:1px solid var(--stroke); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:.95rem; color:var(--muted); }
#fd-footer .wrap{ padding-bottom:max(88px, calc(56px + env(safe-area-inset-bottom))); }
#fd-footer .bar{ position:sticky; bottom:0; background:var(--bg); padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
/* Reveal */
#fd-footer .reveal{ opacity:0; transform:translateY(8px); }
#fd-footer .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion:reduce){ #fd-footer .reveal,#fd-footer .soc{ transition:none !important; } }
/* global helper */
html:has(#fd-footer){ scroll-padding-bottom:72px; }


/*************************************************
  Editor/Fallback
**************************************************/
html.fd-editor .reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html.fd-editor .fx-reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Wenn JS nicht läuft (fd-js fehlt) → Inhalte trotzdem zeigen */
html:not(.fd-js) .reveal,
html:not(.fd-js) .fx-reveal{
  opacity: 1 !important;
  transform: none !important;
}



/* ========================
   Leistungen (Unterseite)
   Scope: #leistungen-alt
======================== */
#leistungen-alt{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  --cat-gap-mobile:56px; --cat-gap-desktop:96px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink); position:relative; isolation:isolate; border-bottom:1px solid var(--stroke);
}
#leistungen-alt::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%); background:#fff; z-index:-1;
}
#leistungen-alt .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
/* Kopf */
#leistungen-alt h1{ font-size:clamp(1.9rem,3.5vw,3rem); line-height:1.15; margin:0 0 10px; }
#leistungen-alt .intro{ color:var(--muted); max-width:75ch; margin:0 0 22px; font-size:1.05rem; }
/* Chips-Sprungnavigation */
#leistungen-alt nav[aria-label="Abschnitte"]{ position:relative; }
#leistungen-alt .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 24px; }
#leistungen-alt .chips a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:#fff; border:1px solid var(--stroke);
  font-weight:700; line-height:1.2; font-size:.95rem; color:var(--ink); text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
  -webkit-text-fill-color:currentColor;
}
#leistungen-alt .chips a:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--accent); }
#leistungen-alt .chips a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:999px; }
/* Abschnitt */
#leistungen-alt .section-head{ margin:32px 0 18px; scroll-margin-top:90px; }
#leistungen-alt .section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }
#leistungen-alt .section-sub{ color:var(--muted); font-size:.98rem; margin:.35rem 0 0; }
/* Inhalt */
#leistungen-alt .svc{
  display:grid; gap:18px; grid-template-columns:1.2fr .8fr;
  grid-template-areas:"text media"; align-items:stretch; margin-bottom:var(--cat-gap-mobile);
}
#leistungen-alt .svc.flip{ grid-template-columns:.8fr 1.2fr; grid-template-areas:"media text"; }
#leistungen-alt .svc:last-of-type{ margin-bottom:0; }
@media (min-width:901px){ #leistungen-alt .svc{ margin-bottom:var(--cat-gap-desktop); } }
/* Karten */
#leistungen-alt .card{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:transform .18s, box-shadow .25s, border-color .25s; padding:16px;
}
#leistungen-alt .card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.08); border-color:#ddd; }
/* Bild-Karte */
#leistungen-alt .card.media{ grid-area:media; padding:0; aspect-ratio:16/10; background:#fff; display:flex; align-items:center; justify-content:center; }
#leistungen-alt .card.text{ grid-area:text; }
#leistungen-alt .thumb{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
/* Text */
#leistungen-alt .copy{ color:var(--muted); margin:0; }
/* Badges */
#leistungen-alt .badges{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
#leistungen-alt .badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:#222; background:#fff;
  border:1px solid var(--stroke); border-radius:999px; padding:6px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
}
#leistungen-alt .badge:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:#111; }
#leistungen-alt .badge .icon{ width:18px; height:18px; color:var(--ok); }
#leistungen-alt .badge .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* FAB */
#leistungen-alt .to-top-fab{
  position:fixed; right:18px; bottom:18px; z-index:10;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--ink); border:1px solid var(--stroke);
  border-radius:999px; padding:10px 14px; font-weight:700; font-size:.95rem; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .18s, box-shadow .25s, border-color .25s;
}
#leistungen-alt .to-top-fab:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 12px 26px rgba(0,0,0,.12); }
#leistungen-alt .to-top-fab:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); }
#leistungen-alt .to-top-fab .icon{ width:18px; height:18px; color:currentColor; }
#leistungen-alt .to-top-fab .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
/* Reveal */
#leistungen-alt .reveal{ opacity:0; transform:translateY(12px); }
#leistungen-alt .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){ #leistungen-alt .reveal{ transition:none !important; } }
/* Mobile */
@media (max-width:900px){
  #leistungen-alt .svc, #leistungen-alt .svc.flip{
    grid-template-columns:1fr; grid-template-areas:"media" "text"; gap:14px;
  }
  #leistungen-alt .section-head{ margin-bottom:12px; }
}


/* ===== INFO Unterseite – scoped Layout ===== */
#svc-hero, #svc-details, #svc-redesign, #svc-support, #svc-benefits, #svc-process, #svc-cta{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb; --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  position:relative; isolation:isolate; color:var(--ink); border-bottom:1px solid var(--stroke);
}
/* Full-bleed backgrounds */
#svc-hero::before, #svc-details::before, #svc-redesign::before, #svc-support::before, #svc-benefits::before, #svc-process::before, #svc-cta::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; width:100dvw; transform:translateX(-50%); z-index:-1;
}
#svc-hero::before{ background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--soft) 100%); }
#svc-process::before{ background:var(--soft); }
#svc-details::before, #svc-redesign::before, #svc-support::before, #svc-benefits::before, #svc-cta::before{ background:#fff; }
/* Containers & type */
.svc-wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; box-sizing:border-box; }
#svc-hero h1, #svc-details h2, #svc-redesign h2, #svc-support h2, #svc-benefits h2, #svc-process h2, #svc-cta h2{
  letter-spacing:.2px; line-height:1.2; margin:0 0 10px;
}
#svc-hero h1{ font-size:clamp(2rem,3.5vw,2.8rem); margin-bottom:14px; }
#svc-details h2, #svc-redesign h2, #svc-support h2, #svc-benefits h2, #svc-process h2, #svc-cta h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.svc-intro{ color:var(--muted); max-width:70ch; margin:0 0 12px; }
/* Grids */
.svc-grid-2{ display:grid; gap:40px; grid-template-columns:1.1fr .9fr; align-items:center; }
.svc-grid-2.equal{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.svc-grid-3{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .svc-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){ .svc-grid-2{ grid-template-columns:1fr; gap:28px; padding-bottom:8px; } }
@media (max-width:700px){ .svc-grid-2.equal, .svc-grid-3{ grid-template-columns:1fr; } }
/* Media card */
.svc-media{
  position:relative; aspect-ratio:16/11; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.06); display:grid; place-items:center;
}
.svc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.svc-media:hover img{ transform:scale(1.02); }
.svc-media figcaption{
  position:absolute; left:10px; bottom:10px; font-size:.85rem;
  background:rgba(255,255,255,.9); border:1px solid var(--stroke); padding:6px 10px; border-radius:10px;
  backdrop-filter:saturate(1.1) blur(4px);
}
/* Cards / features */
.svc-card{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.03); transition:transform .18s, box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column; gap:8px;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.08); border-color:#ddd; }
.svc-features{ margin:6px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.svc-features li{ display:flex; align-items:center; gap:8px; color:#333; font-size:.98rem; }
/* Badges/Actions */
.svc-badges{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 0; }
.svc-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-start; margin-top:18px; }
@media (max-width:900px){ .svc-actions{ justify-content:center; } }
@media (max-width:560px){ .svc-actions{ gap:10px; } }
/* Mobile Reihenfolge */
@media (max-width:900px){
  #svc-hero .svc-grid-2, #svc-redesign .svc-grid-2{ display:flex; flex-direction:column; gap:28px; padding-bottom:8px; }
  #svc-hero .svc-grid-2 > :first-child, #svc-redesign .svc-grid-2 > :first-child{ display:contents; }
  #svc-hero h1{ order:1; } #svc-hero .svc-media{ order:2; } #svc-hero .svc-intro{ order:3; } #svc-hero .svc-badges{ order:4; } #svc-hero .svc-actions{ order:5; }
  #svc-redesign h2{ order:1; } #svc-redesign .svc-media{ order:2; } #svc-redesign .svc-intro{ order:3; } #svc-redesign .svc-actions{ order:4; }
}


/* ===== Globale UI-Basis ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  text-decoration:none; transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:12px; }
.btn:hover{ transform:translateY(-2px); }
.btn.primary{ background:#111; color:#fff; border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08); }
.btn.primary:hover{ background:var(--accent, #ff6a00); color:#111; }
.btn.secondary{ background:#fff; color:#111; border:1px solid var(--stroke, #ececec); }
.btn.secondary:hover{ border-color:var(--accent, #ff6a00); }
/* Icons in Buttons */
.btn .icon path, .btn .icon circle, .btn .icon rect, .btn .icon polyline, .btn .icon line{ stroke:currentColor; }

/* Info-Seite Buttons an globale anlehnen */
.svc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700; line-height:1;
  border:1px solid transparent; box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition:transform .18s, background .25s, color .25s, border-color .25s, box-shadow .25s;
  text-decoration:none !important;
}
.svc-btn:hover{ transform:translateY(-2px); }
.svc-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:12px; }
.svc-btn.primary{ background:#111; color:#fff; }
.svc-btn.primary:hover{ background:var(--accent); color:#111; }
.svc-btn.secondary{ background:#fff; color:#111; border:1px solid var(--stroke); }
.svc-btn.secondary:hover{ border-color:var(--accent); }

/* Badges */
.svc-badge, .svc-badge:link, .svc-badge:visited{
  display:inline-flex; align-items:center; gap:8px; font-size:.95rem; color:#222 !important;
  background:#fff; border:1px solid var(--stroke); border-radius:999px; padding:8px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); text-decoration:none !important;
  transition:transform .18s, box-shadow .25s, border-color .25s;
}
.svc-badge:hover, .svc-badge:focus{
  color:#222 !important; text-decoration:none !important; transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--ink);
}

/* Icons – vereinheitlicht */
.icon, .svc-icon{ width:18px; height:18px; color:currentColor; flex:0 0 auto; }
.icon path, .icon circle, .icon rect, .icon polyline, .icon line,
.svc-icon path, .svc-icon circle, .svc-icon rect, .svc-icon polyline, .svc-icon line{
  stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
/* Haken grün */
.svc-badge .svc-icon, .svc-features .svc-icon{ color:var(--ok); }

/* Letzte Info-Sektion mittig */
.svc-center, #svc-cta .svc-wrap{
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
}


/**********************
  PORTFOLIO (Unterseite) – #portfolio-page
**********************/
#portfolio-page{
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb;
  --accent:#ff6a00; --ok:#16a34a;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink); background:#fff; position:relative; isolation:isolate;
}
/* Container & Typo */
#portfolio-page .wrap{ max-width:1600px; margin:0 auto; padding:72px 20px 64px; }
:where(#portfolio-page) h1{ font-size:clamp(1.9rem,3.5vw,3rem); line-height:1.15; margin:0 0 10px; }
:where(#portfolio-page) .intro{ color:var(--muted); max-width:75ch; margin:0 0 24px; font-size:1.05rem; }
/* Chips */
#portfolio-page .filters{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 28px; }
#portfolio-page .chip{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border-radius:999px; background:#fff; border:1px solid var(--stroke);
  font-weight:700; cursor:pointer; font-size:clamp(.95rem,2.5vw,1rem);
  color:var(--ink); text-decoration:none; min-height:44px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
}
#portfolio-page .chip:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--accent); }
/* Kategorien-Kopf */
#portfolio-page .cat-head{ margin:32px 0 14px; padding-top:10px; border-top:1px solid var(--stroke); scroll-margin-top:90px; }
#portfolio-page .cat-head h2{ font-size:clamp(1.35rem,2.5vw,1.9rem); margin:0; position:relative; display:inline-block; }
#portfolio-page .cat-head h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent 70%); border-radius:999px;
}
#portfolio-page .cat-sub{ color:var(--muted); font-size:.95rem; margin:.6rem 0 0; }
/* Grids */
#portfolio-page .grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:900px){ #portfolio-page .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1280px){
  #portfolio-page .grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  #portfolio-page .grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #portfolio-page .grid--3 .full-span{ grid-column:1 / -1; }
}
/* Karten */
#portfolio-page .card{
  position:relative; background:#fff; border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
#portfolio-page .card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.08); border-color:#ddd; }
#portfolio-page .card-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; text-indent:-9999px; overflow:hidden; }
/* Bilder */
#portfolio-page .thumb{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
@media (max-width:900px){ #portfolio-page .thumb{ aspect-ratio:4/3; } }
#portfolio-page .thumb.thumb--contain{ object-fit:contain; aspect-ratio:auto; height:auto; background:#fff; padding:10px; }
/* 3D-Teaser */
#portfolio-page .thumb.poster{ position:relative; background:#0f0f10; overflow:hidden; aspect-ratio:16/9; }
@media (max-width:900px){ #portfolio-page .thumb.poster{ aspect-ratio:4/3; } }
#portfolio-page .thumb.poster img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
#portfolio-page .card:hover .thumb.poster img{ transform:scale(1.03); }
#portfolio-page .poster-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.25)); padding:14px; }
#portfolio-page .poster-cta{
  position:relative; z-index:2; appearance:none; border:1px solid var(--accent); background:#fff; color:#111;
  font-weight:800; padding:12px 18px; border-radius:12px; cursor:pointer; min-height:44px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); transition:transform .18s, background .25s, border-color .25s;
}
#portfolio-page .poster-cta:hover{ transform:translateY(-2px); background:var(--accent); }
/* Content */
#portfolio-page .card-content{ position:relative; z-index:2; padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
#portfolio-page .card h3{ margin:0; font-size:clamp(1.05rem,2.5vw,1.15rem); }
#portfolio-page .desc{ margin:0; color:var(--muted); font-size:clamp(.95rem,2.5vw,1rem); }
/* Badges */
#portfolio-page .badges{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
#portfolio-page .badge{
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:#222; background:#fff;
  border:1px solid var(--stroke); border-radius:999px; padding:6px 10px;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
}
#portfolio-page .badge:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--ink); }
#portfolio-page .badge .icon{ width:18px; height:18px; color:var(--ok); }
#portfolio-page .badge .icon path{ stroke:currentColor; stroke-width:2; fill:none; }
/* Reveal */
#portfolio-page .reveal{ opacity:0; transform:translateY(14px); }
#portfolio-page .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .5s ease; }
/* Back-to-top FAB */
#portfolio-page .to-top-fab{
  position:fixed; right:clamp(12px, 2vw, 18px); bottom:clamp(12px, 2vw, 18px); z-index:10;
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:#000;
  border:1px solid var(--stroke); border-radius:999px; padding:10px 14px; font-weight:700; font-size:.95rem; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.10); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .2s ease, transform .18s ease; min-height:44px;
}
#portfolio-page .to-top-fab.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
/* Vollbild-Modal */
#portfolio-page .modal{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:stretch; justify-content:center; z-index:99; }
#portfolio-page .modal.is-open{ display:flex; }
#portfolio-page .sheet{ width:100vw; height:100vh; background:#0f0f10; display:flex; flex-direction:column; }
#portfolio-page .sheet-header{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#141416; border-bottom:1px solid #222; flex-wrap:wrap; }
#portfolio-page .title{ color:#fff; font-weight:800; margin-right:auto; font-size:clamp(1rem,2.2vw,1.1rem); }
#portfolio-page .actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
#portfolio-page .btn{ border:1px solid var(--accent); background:#fff; color:#111; font-weight:800; padding:10px 12px; border-radius:10px; cursor:pointer; min-height:44px; }
#portfolio-page .btn.secondary{ background:transparent; color:#eee; border-color:#3a3a3a; }
#portfolio-page .btn.secondary:hover{ border-color:var(--accent); color:#111; background:#fff; }
/* 3D-Viewer */
#portfolio-page .viewer{ flex:1 1 auto; position:relative; }
#portfolio-page .viewer iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
#portfolio-page .fallback{ position:absolute; left:12px; bottom:12px; right:12px; color:#ddd; font-size:.9rem; background:rgba(0,0,0,.35); border-radius:10px; padding:8px 10px; }
/* 3D-Poster im Viewer */
#portfolio-page .viewer-poster{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  transition:opacity .35s ease;
}
#portfolio-page .viewer-poster[hidden]{ display:none; }
#portfolio-page .viewer-poster.is-fading{ opacity:0; }
#portfolio-page .viewer-poster img{
  max-width:min(92vw, 1600px); max-height:min(86vh, 980px);
  width:auto; height:auto; object-fit:contain; display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.35); border-radius:12px; background:#0f0f10;
}
/* Bild-Viewer */
#portfolio-page .viewer-img{ flex:1 1 auto; display:grid; place-items:center; padding:10px; }
#portfolio-page .viewer-img img{
  max-width:min(92vw, 1600px); max-height:min(86vh, 980px);
  width:auto; height:auto; object-fit:contain; border-radius:12px; background:#0f0f10;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#portfolio-page .caption{ color:#cfcfcf; font-size:.95rem; padding:8px 12px 14px; }
/* Elementor/Astra Wrapper neutralisieren */
#portfolio-page .elementor-widget-container{ padding:0 !important; margin:0 !important; }

/**********************
  RECHT (Impressum/Datenschutz)
**********************/
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page){
  --ink:#111; --muted:#444; --stroke:#ececec; --soft:#f9fafb; --accent:#ff6a00;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink); position:relative; isolation:isolate; border-bottom:1px solid var(--stroke);
}
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page)::before{
  content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%);
  background:#fff; z-index:-1;
}
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .wrap{ max-width:1200px; margin:0 auto; padding:72px 20px 64px; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) h1{ font-size:clamp(1.9rem,3.5vw,3rem); line-height:1.15; margin:0 0 10px; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .intro{ color:var(--muted); max-width:75ch; margin:0 0 22px; font-size:1.05rem; }

/* Chips */
#leistungen-alt .chips,
#impressum .chips, #impressum-page .chips,
#datenschutz .chips, #datenschutz-page .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 24px; }
#leistungen-alt .chips a,
#impressum .chips a, #impressum-page .chips a,
#datenschutz .chips a, #datenschutz-page .chips a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:#fff; border:1px solid var(--stroke);
  font-weight:700; line-height:1.2; font-size:.95rem; color:var(--ink); text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.04); transition:transform .18s, box-shadow .25s, border-color .25s;
  -webkit-text-fill-color:currentColor;
}
#leistungen-alt .chips a:hover,
#impressum .chips a:hover, #impressum-page .chips a:hover,
#datenschutz .chips a:hover, #datenschutz-page .chips a:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); border-color:var(--accent); }
#leistungen-alt .chips a:focus-visible,
#impressum .chips a:focus-visible, #impressum-page .chips a:focus-visible,
#datenschutz .chips a:focus-visible, #datenschutz-page .chips a:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:999px; }

/* Abschnittskopf */
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .section-head{ margin:32px 0 14px; scroll-margin-top:90px; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }

/* Karten + Typo */
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .card{
  background:#fff; border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:transform .18s, box-shadow .25s, border-color .25s; padding:16px;
}
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.07); border-color:#ddd; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) p{ margin:.5rem 0; color:var(--muted); }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) ul{ margin:.4rem 0 .2rem; padding-left:1.2rem; color:var(--muted); }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) a:hover{ color:var(--accent); }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .small{ font-size:.92rem; color:#555; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .nowrap{ white-space:nowrap; }

/* Reveal */
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .reveal{ opacity:0; transform:translateY(12px); }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .reveal.revealed{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion:reduce){
  :where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .reveal,
  :where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .card{ transition:none !important; }
}

/* FAB */
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .to-top-fab{
  position:fixed; right:18px; bottom:18px; z-index:10;
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--ink); border:1px solid var(--stroke);
  border-radius:999px; padding:10px 14px; font-weight:700; font-size:.95rem; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.10); transition:transform .18s, box-shadow .25s, border-color .25s;
}
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .to-top-fab:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 12px 26px rgba(0,0,0,.12); }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .to-top-fab .icon{ width:18px; height:18px; color:currentColor; }
:where(#impressum, #impressum-page, #datenschutz, #datenschutz-page) .to-top-fab .icon path{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Datenschutz: AV-/Fonts-Toggles (falls genutzt) */
#datenschutz[data-formsubmit-av="yes"] .formsubmit-av-no,
#datenschutz-page[data-formsubmit-av="yes"] .formsubmit-av-no{ display:none; }
#datenschutz[data-formsubmit-av="no"]  .formsubmit-av-yes,
#datenschutz-page[data-formsubmit-av="no"]  .formsubmit-av-yes{ display:none; }
#datenschutz[data-fonts="local"]  .fonts-remote,
#datenschutz-page[data-fonts="local"]  .fonts-remote{ display:none; }
#datenschutz[data-fonts="google"] .fonts-local,
#datenschutz-page[data-fonts="google"] .fonts-local{ display:none; }

/* ===========================
   Orange Unterstreichung – Hauptabschnitte
=========================== */
:where(
  /* Startseite */
  #leistungen h2,
  #ueber-mich h2,
  #portfolio h2,
  #faq h2,
  #kontakt h2,
  #fd-footer h2,
  /* Portfolio-Unterseite */
  #portfolio-page .cat-head h2,
  /* Leistungen-Unterseite */
  #leistungen-alt h1,
  #leistungen-alt h2,
  /* Info-Unterseiten */
  #svc-hero h1,
  #svc-details h2,
  #svc-redesign h2,
  #svc-support h2,
  #svc-benefits h2,
  #svc-process h2,
  #svc-cta h2,
  /* Recht */
  #impressum-page h1,
  #impressum-page .section-head h2,
  #datenschutz-page h1,
  #datenschutz-page .section-head h2
){
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
:where(
  #leistungen h2,
  #ueber-mich h2,
  #portfolio h2,
  #faq h2,
  #kontakt h2,
  #fd-footer h2,
  #portfolio-page .cat-head h2,
  #leistungen-alt h1,
  #leistungen-alt h2,
  #svc-hero h1,
  #svc-details h2,
  #svc-redesign h2,
  #svc-support h2,
  #svc-benefits h2,
  #svc-process h2,
  #svc-cta h2,
  #impressum-page h1,
  #impressum-page .section-head h2,
  #datenschutz-page h1,
  #datenschutz-page .section-head h2
)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--accent), transparent 70%); border-radius:999px;
}
/* Datenschutz – Details/Akkordeon wie FAQ (statt Browser-Pfeile) */
#datenschutz details{
  background:#fff; border:1px solid var(--stroke); border-radius:12px;
  padding:14px 16px; margin:10px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:box-shadow .25s, border-color .25s, background .25s;
}
#datenschutz details:hover,
#datenschutz details[open]{ border-color:#ddd; box-shadow:0 12px 26px rgba(0,0,0,.08); }

#datenschutz summary{
  cursor:pointer; list-style:none; font-weight:700;
  display:flex; align-items:center; gap:10px;
  padding:4px 0 4px 30px; /* Platz für das Plus/Minus links */
  position:relative;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-fill-color:currentColor;
}
#datenschutz summary::-webkit-details-marker{ display:none; }  /* Chrome/Safari */
#datenschutz summary::marker{ content:""; }                   /* Firefox/modern */

#datenschutz summary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,106,0,.35); border-radius:10px;
}

/* Plus/Minus-Icon via Pseudoelemente (wie FAQ) */
#datenschutz summary::before,
#datenschutz summary::after{
  content:""; position:absolute; left:4px; top:50%;
  width:18px; height:2px; border-radius:2px; background:currentColor;
  transform:translateY(-50%);
}
#datenschutz summary::after{
  transform:translateY(-50%) rotate(90deg);
  transition:transform .25s ease, opacity .2s ease;
}
#datenschutz details[open] summary::after{
  opacity:0; transform:translateY(-50%) rotate(0deg); /* ergibt ein Minus */
}

/* Inhalt nach dem Summary */
#datenschutz details p{ margin:10px 0 0; color:var(--muted); }

/* =========================================================
   PORTFOLIO – Zurück-Buttons dynamisch unter der Sticky-Navi
   - berücksichtigt Header-Höhe (Desktop/Mobile), Admin-Bar, iOS-Notch
   ========================================================= */

/* 1) Grund-Variablen (bei Bedarf Header-Höhe anpassen) */
:root{
  --fd-nav-h: 64px;   /* typische Desktop-Höhe deiner Sticky-Navigation */
  --fd-offset: 12px;  /* kleiner Abstand unter der Navi */
  --fd-admin: 0px;    /* wird unten überschrieben, wenn Admin-Bar sichtbar */
}

/* Mobile/Tablet: Header meist etwas niedriger */
@media (max-width: 900px){
  :root{ --fd-nav-h: 56px; }
}

/* WordPress Admin-Bar (eingeloggt): 32px Desktop, ~46px mobil */
.admin-bar{ --fd-admin: 32px; }
@media (max-width: 782px){
  .admin-bar{ --fd-admin: 46px; }
}

/* 2) Modal-Container: oben Platz lassen (für Navi + Buttons) */
#portfolio-page .modal .sheet{
  position: relative;
  padding-top: calc(var(--fd-nav-h) + 56px);
}

/* 3) Buttons: dynamisch unter der Navi – unterhalb z-index:9999 der Navi */
#portfolio-page .modal .img-back,
#portfolio-page .modal .modal-back{
  position: absolute;
  left: 16px;
  /* Basis: Admin-Bar + Navi-Höhe + Offset */
  top: calc(var(--fd-admin) + var(--fd-nav-h) + var(--fd-offset));
  z-index: 9998;  /* Navi liegt bei dir auf 9999 – also knapp darunter */
  display: inline-flex;
  align-items: center; gap: 8px;
  min-height: 40px; padding: 10px 14px;
  border-radius: 999px;
  background: #fff; border: 1px solid #e6e6e6;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-weight: 700; cursor: pointer;
}

/* iOS-Notch zusätzlich berücksichtigen (falls verfügbar) */
@supports (padding: max(0px)){
  #portfolio-page .modal .img-back,
  #portfolio-page .modal .modal-back{
    top: calc(
      var(--fd-admin)
      + var(--fd-nav-h)
      + max(env(safe-area-inset-top, 0px), var(--fd-offset))
    );
  }
}

/* Feinschliff */
#portfolio-page .modal .img-back:hover,
#portfolio-page .modal .modal-back:hover{
  transform: translateY(-1px);
  border-color: #ff6a00;
}
#portfolio-page .modal .img-back:focus-visible,
#portfolio-page .modal .modal-back:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,106,0,.25);
}

/* sehr schmale Geräte: etwas kompakter */
@media (max-width: 420px){
  #portfolio-page .modal .img-back,
  #portfolio-page .modal .modal-back{
    left: 12px; padding: 8px 12px;
  }
}