@charset "utf-8";
/* =========================================================================
   Zaun & Metallbau Kuhn – Design-System und Layouts
   Kein Framework, kein Build-Schritt. Reihenfolge:
   1 Grundlagen  2 Bausteine  3 Kopf  4 Hero  5 Sektionen  6 Zaun-Planer
   7 Referenzen  8 Kontakt    9 Fuß   10 Unterseiten  11 Bewegung/Mobil
   ========================================================================= */

/* ============================== 1 GRUNDLAGEN ============================= */
:root{
  /* Papier – warmes Off-White, vom Sandton der Zaunfotos abgeleitet */
  --paper:      #FAF8F5;
  --paper-2:    #F2EDE6;
  --paper-3:    #E9E2D8;

  /* Tinte */
  --ink:        #15151A;
  --ink-soft:   #3B3B44;
  --muted:      #65646E;   /* dunkel genug für 4,5:1 auch auf --paper-3 */
  --line:       #E3DDD4;
  --line-soft:  #EFEAE3;

  /* Dunkle Sektionen – Graphit, wie die pulverbeschichteten Pfosten */
  --graphite:   #19191D;
  --graphite-2: #232329;
  --graphite-3: #2E2E35;

  /* Marke – direkt aus dem Logo der bisherigen Seite */
  --red:        #B01F24;
  --red-deep:   #790016;
  --red-bright: #C93036;
  --red-light:  #E2565B;   /* nur auf dunklem Grund */

  /* Stahl – für die gezeichneten Zäune */
  --steel-dark: #3A3E42;
  --steel:      #585E64;
  --steel-lite: #7E868D;

  /* Abstand zu den Rändern des Bildschirms.

     Bewusst `calc(… + env(…))` und nicht `max(…, env(…))`. Der Unterschied
     zählt auf dem iPhone: Der Home-Indikator meldet unten 34 Punkte. `max`
     nimmt davon den grösseren Wert, also 34, und dann sitzt der Knopf genau
     auf dem Indikator. `calc` legt die eigenen 22 Punkte obendrauf, und er
     steht darüber. Genauso quer, wo die Kameraeinbuchtung seitlich meldet. */
  --unten:  calc(26px + env(safe-area-inset-bottom, 0px));
  --rechts: calc(16px + env(safe-area-inset-right, 0px));
  --links:  calc(16px + env(safe-area-inset-left, 0px));

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-s: 0 1px 2px rgba(21,21,26,.05), 0 4px 14px rgba(21,21,26,.05);
  --shadow-m: 0 2px 6px rgba(21,21,26,.05), 0 18px 44px rgba(21,21,26,.09);
  --shadow-l: 0 4px 12px rgba(21,21,26,.06), 0 34px 80px rgba(21,21,26,.14);

  --pad: clamp(20px, 4vw, 40px);
  --stick: 94px;   /* Abstand für klebende Elemente unter der Kopfzeile */
  --sect: clamp(72px, 9vw, 132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Ist die Kopfzeile weggefahren, rücken klebende Elemente nach oben nach */
html.nav-hidden{--stick:14px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65;
  font-feature-settings:'kern' 1,'liga' 1,'cv05' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* clip statt hidden: schneidet waagerecht ab, erzeugt aber KEINEN
   Scroll-Container – nur so bleibt position:sticky weiter unten heil. */
@supports (overflow:clip){ body{overflow-x:clip} }

h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk','Inter',-apple-system,Helvetica,Arial,sans-serif;
  font-weight:600; letter-spacing:-.022em; line-height:1.08;
  margin:0; text-wrap:balance;
}
p{margin:0 0 1em}
blockquote,figure,figcaption{margin:0}
p:last-child{margin-bottom:0}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:600}
::selection{background:var(--red);color:#fff}

.container{width:min(1240px,100% - 2*var(--pad));margin-inline:auto}
.container--narrow{width:min(880px,100% - 2*var(--pad))}

.section{padding-block:var(--sect);position:relative}
.section--tight{padding-block:clamp(56px,6vw,88px)}
.section--sand{background:var(--paper-2)}
.section--dark{background:var(--graphite);color:#EFEBE6}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:14px 20px;border-radius:0 0 var(--r-sm) 0;
  font-weight:600;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.section--dark :focus-visible{outline-color:var(--red-light)}

/* Runde und eckige Symbolflächen. Die doppelte Klasse hebt die Spezifität an,
   damit allgemeinere Regeln weiter unten das Zentrieren nicht mehr aushebeln
   können. (.burger steht bewusst nicht dabei – der wird am Desktop versteckt.) */
.nav__tel-ic.nav__tel-ic,
.trustbar__ic.trustbar__ic,
.hero__badge-ic.hero__badge-ic,
.info-list__ic.info-list__ic,
.quote__av.quote__av,
.thanks__ic.thanks__ic,
.ic.ic{
  display:grid;place-items:center;line-height:0;margin:0;
}
/* .burger bleibt aussen vor – der wird am Desktop ausgeblendet. */

/* ============================== 2 BAUSTEINE ============================== */

/* Augenbraue über der Überschrift – kleine rote Marke plus Versalien */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--red);flex:none;
}
.section--dark .eyebrow,
.cta-band .eyebrow{color:var(--red-light)}
.section--dark .eyebrow::before,
.cta-band .eyebrow::before{background:var(--red-light)}

.h-display{font-size:clamp(2.6rem,6vw,4.7rem);line-height:1.02;letter-spacing:-.03em}
.h-1{font-size:clamp(2rem,3.7vw,3.15rem)}
.h-2{font-size:clamp(1.55rem,2.5vw,2.15rem)}
.h-3{font-size:clamp(1.12rem,1.5vw,1.35rem);letter-spacing:-.012em}

.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.7;color:var(--ink-soft);max-width:62ch}
.section--dark .lead,
.cta-band .lead{color:#C9C4BE}
.muted{color:var(--muted)}
.section--dark .muted{color:#9C978F}

.sect-head{max-width:70ch;margin-bottom:clamp(38px,4.5vw,60px)}
.sect-head--split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px);align-items:end;max-width:none;
}
.sect-head--split .lead{padding-bottom:6px}

/* Knöpfe */
.btn{
  --bg:var(--red); --fg:#fff; --bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;min-height:54px;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  border-radius:var(--r-sm);
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, border-color .18s, box-shadow .18s;
  box-shadow:0 1px 2px rgba(120,10,15,.14), 0 10px 26px -12px rgba(176,31,36,.6);
}
.btn:hover{--bg:var(--red-deep);--bd:var(--red-deep);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(120,10,15,.18), 0 18px 34px -14px rgba(176,31,36,.65)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}

.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line);box-shadow:none}
.btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink);box-shadow:var(--shadow-s)}
.section--dark .btn--ghost,
.cta-band .btn--ghost,
.planner .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.34)}
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.planner .btn--ghost:hover{--bg:#fff;--fg:var(--graphite);--bd:#fff}

.btn--lg{padding:19px 34px;min-height:60px;font-size:1.06rem}
.btn--sm{padding:11px 18px;min-height:44px;font-size:.92rem}
.btn--block{width:100%}

/* Textlink mit Pfeil */
.arrow-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.97rem;
  color:var(--red);text-decoration:none;
  border-bottom:1.5px solid transparent;padding-bottom:2px;
  transition:border-color .18s,gap .18s,color .18s;
}
.arrow-link:hover{border-bottom-color:currentColor;gap:14px}
.section--dark .arrow-link{color:var(--red-light)}
.arrow-link svg{transition:transform .18s}
.arrow-link:hover svg{transform:translateX(2px)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:.86rem;font-weight:500;color:var(--ink-soft);
  box-shadow:var(--shadow-s);
}
.chip svg{color:var(--red);flex:none}
.chip--plain{background:transparent;box-shadow:none;border-style:dashed;color:var(--muted)}
.section--dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#D9D4CE;box-shadow:none}
.section--dark .chip svg{color:var(--red-light)}

/* Karte */
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-s);overflow:hidden;
}

/* Bildrahmen mit festem Seitenverhältnis */
.frame{position:relative;overflow:hidden;background:var(--paper-3);border-radius:var(--r-lg)}
.frame>img{width:100%;height:100%;object-fit:cover;display:block}
.frame--3x2{aspect-ratio:3/2}
.frame--4x3{aspect-ratio:4/3}
.frame--1x1{aspect-ratio:1/1}
.frame--4x5{aspect-ratio:4/5}
.frame--3x4{aspect-ratio:3/4}

/* ================================ 3 KOPF ================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  will-change:transform;
  background:rgba(250,248,245,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background-color .25s, box-shadow .25s,
              transform .34s cubic-bezier(.2,.7,.3,1);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 28px -22px rgba(21,21,26,.55)}
/* weggefahren beim Runterscrollen */
.site-header.is-hidden{transform:translateY(-100%)}

.topbar{
  background:var(--graphite);color:#B9B4AD;
  font-size:.83rem;
}
.topbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;padding-block:7px;
}
.topbar a{color:#E6E1DB;text-decoration:none;font-weight:500}
.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.topbar__list{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:8px}
.topbar__item svg{color:var(--red-light);flex:none}

.nav{
  display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);
  padding-block:clamp(10px,1.4vw,16px);
  transition:padding-block .3s cubic-bezier(.2,.7,.3,1);
}
.nav__logo{flex:none;display:block;line-height:0}
.nav__logo img{
  width:clamp(158px,13.5vw,196px);
  transition:width .3s cubic-bezier(.2,.7,.3,1);
}
/* Beim Scrollen schrumpft die Zeile – der Inhalt bekommt den Platz zurück */
.site-header.is-stuck .nav{padding-block:7px}
.site-header.is-stuck .nav__logo img{width:clamp(130px,10.5vw,150px)}
.nav__links{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);
  margin-left:auto;
}
.nav__link{
  position:relative;text-decoration:none;color:var(--ink-soft);
  font-size:.97rem;font-weight:500;padding:8px 2px;
  transition:color .18s;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--red);transition:right .22s cubic-bezier(.2,.7,.3,1);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav__actions{display:flex;align-items:center;gap:12px;margin-left:auto;padding-left:12px}

.nav__tel{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);
  font-size:1rem;white-space:nowrap;
}
.nav__tel>span:last-child{display:block}
.nav__tel small{display:block;font-family:'Inter',sans-serif;font-size:.72rem;font-weight:400;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.nav__tel-ic{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--red);color:#fff;
  transition:transform .2s;
}
.nav__tel:hover .nav__tel-ic{transform:scale(1.07)}

.burger{
  display:none;width:48px;height:48px;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ================================ 4 HERO ================================= */
.hero{
  position:relative;
  padding-top:clamp(40px,6vw,76px);
  padding-bottom:0;
  background:
    radial-gradient(120% 80% at 88% 0%, #FFF6EC 0%, rgba(255,246,236,0) 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  overflow:hidden;
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4.6vw,76px);align-items:center;
  padding-bottom:clamp(150px,19vw,250px);
}
.hero__title{font-size:clamp(2.35rem,4.6vw,3.95rem);line-height:1.04;letter-spacing:-.035em}
.hero__title em{font-style:normal;color:var(--red);position:relative;white-space:nowrap}
.hero__lead{margin-top:26px;max-width:52ch;font-size:clamp(1.06rem,1.35vw,1.2rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__chips{margin-top:32px}

/* Bildseite */
.hero__media{position:relative}
.hero__shot{
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);
  background:var(--paper-3);aspect-ratio:4/5;
  transform:translateZ(0);
}
.hero__shot img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
/* Kleine Kennzahl-Karte, die über das Foto ragt */
.hero__badge{
  position:absolute;left:-26px;bottom:34px;
  background:#fff;border-radius:var(--r-lg);padding:20px 24px;
  box-shadow:var(--shadow-m);border:1px solid var(--line-soft);
  display:flex;align-items:center;gap:16px;max-width:290px;
}
.hero__badge-ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--red),var(--red-deep));color:#fff}
.hero__badge b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.02rem;letter-spacing:-.015em}
.hero__badge>span:last-child>span{display:block;font-size:.83rem;color:var(--muted);line-height:1.45}

/* Der gezeichnete Zaun am unteren Rand – schaut oben aus dem Boden heraus */
.fence-band{
  position:absolute;left:0;right:0;bottom:0;
  pointer-events:none;
  line-height:0;
}
.fence-band svg{width:100%;height:auto;display:block}
.hero .fence-band{bottom:-2px}

/* ============================= 5 SEKTIONEN =============================== */

/* --- Vertrauensleiste unter dem Hero --- */
.trustbar{
  background:var(--graphite);color:#DCD7D1;
  padding-block:clamp(26px,3vw,38px);
  position:relative;z-index:2;
}
.trustbar__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,40px);
}
.trustbar__item{display:flex;gap:14px;align-items:flex-start}
.trustbar__ic{
  width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(226,86,91,.14);color:var(--red-light);
}
.trustbar__item b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1rem;color:#fff;letter-spacing:-.012em}
.trustbar__item>span:last-child>span{display:block;font-size:.87rem;color:#A39E97;line-height:1.5;margin-top:2px}

/* --- Leistungen --- */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.service{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-s);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--line)}
.service__media{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);position:relative}
.service__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.service:hover .service__media img{transform:scale(1.05)}
.service__no{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.1em;
  background:rgba(25,25,29,.72);color:#fff;padding:6px 11px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.service__body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1;gap:12px}
.service__body h3{margin-bottom:2px}
.service__body p{font-size:.97rem;color:var(--ink-soft);margin:0}
.service__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.tag{
  font-size:.79rem;font-weight:500;color:var(--ink-soft);
  background:var(--paper-2);border-radius:999px;padding:5px 11px;white-space:nowrap;
}


/* --- Hero: zwei Kacheln für die beiden Hauptleistungen ------------------- */
.hero__duo{display:grid;gap:clamp(12px,1.4vw,18px)}
.duo{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg);background:var(--paper-3);
  box-shadow:var(--shadow-m);text-decoration:none;
  transition:transform .35s var(--ease, cubic-bezier(.2,.7,.3,1)), box-shadow .35s;
}
.duo:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.duo picture{display:block;aspect-ratio:16/9}
.duo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.duo:hover img{transform:scale(1.04)}
.duo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(14,14,17,.82) 0%, rgba(14,14,17,.15) 48%, rgba(14,14,17,0) 70%);
}
.duo__label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.6vw,20px);color:#fff;
}
.duo__label b{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(1rem,1.3vw,1.18rem);letter-spacing:-.018em;
}
.duo__label small{display:block;font-size:.82rem;opacity:.8;margin-top:2px}

/* --- Bildgruppe im Terrassen-Abschnitt ---------------------------------- */
.feature{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-rows:auto auto;gap:clamp(12px,1.5vw,20px);
  margin-bottom:clamp(38px,4.4vw,62px);
}
.feature__main{grid-row:span 2;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3)}
.feature__main picture,.feature__main img{display:block;width:100%;height:100%;object-fit:cover}
.feature__main{aspect-ratio:16/10}
.feature__side{border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);aspect-ratio:16/11}
.feature__side picture,.feature__side img{display:block;width:100%;height:100%;object-fit:cover}

/* --- Dreispaltiger Fließtext -------------------------------------------- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.col h3{margin-bottom:10px}
.col p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);margin:0}

.sect-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  margin-top:clamp(30px,3.6vw,50px);
}
.sect-foot .muted{font-size:.94rem;max-width:40ch}

/* --- Reiter im Planer ---------------------------------------------------- */
.ptabs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:7px;border-radius:calc(var(--r-lg) + 4px);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.ptab{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:60px;padding:12px 18px;cursor:pointer;
  border:0;border-radius:var(--r-lg);background:transparent;color:#B6B1AA;
  font-family:'Space Grotesk',sans-serif;font-size:clamp(.94rem,1.2vw,1.08rem);
  font-weight:600;letter-spacing:-.015em;
  transition:background-color .25s, color .25s, box-shadow .25s;
}
.ptab:hover{color:#fff;background:rgba(255,255,255,.06)}
.ptab[aria-selected="true"]{
  background:var(--red);color:#fff;
  box-shadow:0 2px 4px rgba(120,10,15,.25), 0 14px 30px -14px rgba(176,31,36,.8);
}
.ptab svg{flex:none}
.planner__panel[hidden]{display:none}

/* --- Datei-Anhänge im Formular ------------------------------------------ */
.upload{position:relative;display:block}
.upload input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.upload__face{
  display:flex;align-items:center;gap:15px;
  padding:18px 18px;border-radius:var(--r-sm);
  border:1.5px dashed var(--line);background:var(--paper);
  transition:border-color .2s, background-color .2s;
}
.upload input[type="file"]:hover + .upload__face,
.upload.is-over .upload__face{border-color:var(--red);background:#fff}
.upload input[type="file"]:focus-visible + .upload__face{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(176,31,36,.13);
}
.upload__ic{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--paper-2);color:var(--red);
}
.upload__face b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.97rem;
  font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.upload__face small{display:block;font-size:.82rem;color:var(--muted);margin-top:2px;line-height:1.4}

.upload__list{display:grid;gap:8px;margin-top:12px}
.upload__list:empty{margin-top:0}
.upload__item{
  display:flex;align-items:center;gap:12px;
  padding:9px 10px 9px 12px;border-radius:var(--r-sm);
  background:var(--paper);border:1px solid var(--line-soft);
}
.upload__thumb{
  width:38px;height:38px;border-radius:7px;flex:none;object-fit:cover;
  background:var(--paper-2);
}
.upload__meta{flex:1 1 auto;min-width:0}
.upload__meta b{display:block;font-size:.9rem;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload__meta span{display:block;font-size:.78rem;color:var(--muted)}
.upload__drop{
  flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  display:grid;place-items:center;transition:color .18s,border-color .18s,background-color .18s;
}
.upload__drop:hover{color:var(--red);border-color:var(--red);background:#FFF5F5}
.upload__note{margin-top:10px;font-size:.83rem;color:var(--muted);line-height:1.55}

/* --- Ablauf: vier Schritte, rein typografisch --------------------------
   Kein Bild, keine Animation. Grosse Ziffern auf einer feinen Linie,
   darunter Titel, Satz und ein kurzer Zusatz. Bleibt auf jedem Gerät
   gleich gut lesbar.                                                     */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none;
  border-top:1px solid var(--line);
}
.step{
  position:relative;
  padding:clamp(26px,3vw,40px) clamp(18px,2.2vw,32px) clamp(24px,2.8vw,36px) 0;
  border-right:1px solid var(--line);
}
.step:last-child{border-right:0;padding-right:0}
/* Der Punkt auf der Linie markiert den Schritt */
.step::before{
  content:"";position:absolute;left:0;top:-5px;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 4px var(--paper-2);
}
.step__no{
  display:block;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(2.6rem,4.6vw,4rem);line-height:1;letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--red);
  margin-bottom:clamp(16px,1.8vw,24px);
  transition:color .35s var(--ease, cubic-bezier(.2,.7,.3,1));
}
.step:hover .step__no{color:var(--red)}
.step__title{
  font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.18;color:var(--ink);
  margin:0 0 10px;
}
.step__text{font-size:.97rem;line-height:1.62;color:var(--ink-soft);margin:0 0 16px}
.step__tag{
  display:inline-block;
  font-family:'Space Grotesk',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.steps__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;
  margin-top:clamp(30px,3.4vw,46px);
}
.steps__foot .muted{font-size:.94rem}
.steps__foot a[href^="tel"]{color:var(--red);font-weight:600;text-decoration:none}
.steps__foot a[href^="tel"]:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Zahlenband --- */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.figure b{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(2.1rem,3.6vw,3.1rem);letter-spacing:-.035em;line-height:1;color:var(--red);
}
.section--dark .figure b{color:var(--red-light)}
.figure span{display:block;margin-top:10px;font-size:.93rem;color:var(--ink-soft)}
.section--dark .figure span{color:#A9A49D}

/* --- Metallbau (dunkel, zweispaltig) --- */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,78px);align-items:center;
}
.split--media-first .split__media{order:-1}
.split__media{position:relative}
.split__media .frame{box-shadow:var(--shadow-l)}
.split__inset{
  position:absolute;right:-24px;bottom:-28px;width:44%;max-width:230px;
  border-radius:var(--r-lg);overflow:hidden;border:6px solid var(--graphite);
  box-shadow:var(--shadow-l);
}
.section:not(.section--dark) .split__inset{border-color:var(--paper)}
.checklist{display:grid;gap:14px;margin-top:30px}
.checklist li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;line-height:1.55}
.checklist svg{flex:none;margin-top:3px;color:var(--red)}
.section--dark .checklist svg{color:var(--red-light)}

/* --- Kundenstimmen --- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.quote{
  display:flex;flex-direction:column;gap:18px;
  padding:clamp(24px,2.6vw,34px);
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-s);
}
.quote__stars{display:flex;gap:3px;color:var(--red)}
.quote p{font-size:1.02rem;line-height:1.66;color:var(--ink-soft);margin:0}
.quote figcaption{
  margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:12px;
  font-size:.92rem;
}
.quote__av{
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--paper-2);color:var(--red);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;
}
.quote figcaption b{display:block;font-weight:600;color:var(--ink);line-height:1.35}
.quote figcaption>span:last-child>span{display:block;color:var(--muted);font-size:.85rem}

/* --- Einzugsgebiet --- */
.area{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4.4vw,70px);align-items:center}
.area__list{display:flex;flex-wrap:wrap;gap:9px}
.area__list li{
  font-size:.92rem;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
}
.area__list li:first-child{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}

/* --- FAQ --- */
.faq{display:grid;gap:12px;max-width:900px;margin-inline:auto}
.faq__item{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.faq__item:hover{border-color:var(--line)}
.faq__item[open]{border-color:var(--line);box-shadow:var(--shadow-s)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px clamp(18px,2vw,26px);cursor:pointer;list-style:none;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.03rem;letter-spacing:-.012em;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";width:12px;height:12px;flex:none;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s;
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq__a{padding:0 clamp(18px,2vw,26px) 24px;color:var(--ink-soft);font-size:.99rem;max-width:74ch}

/* ============================ 6 ZAUN-PLANER ============================== */
.planner{
  background:var(--graphite);color:#EFEBE6;position:relative;
}
.planner::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 15% 0%, rgba(226,86,91,.14) 0%, rgba(226,86,91,0) 60%);
}
.planner__grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(24px,3.4vw,52px);align-items:start;position:relative;
}

.planner__preview{position:sticky;top:calc(var(--stick) + 14px);transition:top .34s cubic-bezier(.2,.7,.3,1)}
.cfg-card{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  background:var(--graphite-2);
}
.cfg-stage{
  background:linear-gradient(178deg,#243141 0%,#3B4654 42%,#6A6459 78%,#514A40 100%);
}
.cfg-stage svg{width:100%;height:auto;display:block}
.cfg-read{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,2vw,26px);
  background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.09);
}
.cfg-read__dim{font-family:'Space Grotesk',sans-serif;font-size:.92rem;color:#B6B1AA;letter-spacing:.01em}
.cfg-read__dim b{color:#fff;font-weight:600}
.cfg-read__price{text-align:right}
.cfg-read__price b{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(1.2rem,1.9vw,1.6rem);letter-spacing:-.02em;color:#fff;line-height:1.15;
}
.cfg-read__price span{display:block;font-size:.76rem;color:#9E988F;letter-spacing:.02em}

.cfg-panel{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,26px)}
.cfg-block{border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(16px,1.8vw,22px)}
.cfg-block:first-child{border-top:0;padding-top:0}
.cfg-block__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.cfg-block__head h3{
  font-size:.79rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9E988F;
}
.cfg-block__val{font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:600;color:#fff}
.cfg-hint{font-size:.85rem;color:#9E988F;margin-top:10px;line-height:1.5}

.cfg-opts{display:flex;flex-wrap:wrap;gap:8px}
.cfg-opt{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:11px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);
  color:#D5D0CA;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s;
}
.cfg-opt:hover{background:rgba(255,255,255,.1);color:#fff}
.cfg-opt[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}

/* Farbwahl als Punkte */
.cfg-colors{display:flex;flex-wrap:wrap;gap:10px}
.cfg-color{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding:0;
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);position:relative;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.cfg-color:hover{transform:scale(1.07)}
.cfg-color[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.cfg-color[aria-pressed="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:13px;height:8px;
  border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-2px);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Schieberegler Länge */
.cfg-range{
  -webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;cursor:pointer;
}
.cfg-range::-webkit-slider-runnable-track{height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--red) var(--fill,30%), rgba(255,255,255,.16) var(--fill,30%))}
.cfg-range::-moz-range-track{height:5px;border-radius:999px;background:rgba(255,255,255,.16)}
.cfg-range::-moz-range-progress{height:5px;border-radius:999px;background:var(--red)}
.cfg-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-9.5px;
  background:#fff;border:2px solid var(--red);box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.cfg-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.cfg-scale{display:flex;justify-content:space-between;font-size:.78rem;color:#948E85;margin-top:-4px}

.cfg-cta{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.cfg-note{font-size:.8rem;color:#948E85;line-height:1.55}

/* ============================= 7 REFERENZEN ============================== */
.gallery{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px);
}
.shot{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--paper-3);cursor:zoom-in;border:0;padding:0;display:block;width:100%;
  box-shadow:var(--shadow-s);
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.045)}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(15,15,18,.68) 0%, rgba(15,15,18,.12) 38%, rgba(15,15,18,0) 62%);
  opacity:0;transition:opacity .3s;
}
.shot:hover::after,.shot:focus-visible::after{opacity:1}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.6vw,20px);
  color:#fff;text-align:left;
  font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:-.01em;
  transform:translateY(8px);opacity:0;transition:transform .3s,opacity .3s;
}
.shot__cap small{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:.78rem;opacity:.8;margin-top:2px}
.shot:hover .shot__cap,.shot:focus-visible .shot__cap{transform:none;opacity:1}

.shot[hidden]{display:none}

.gallery__more{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:clamp(22px,2.6vw,32px);
}
.gallery__more .muted{font-size:.9rem;max-width:34ch}

.shot--w3{grid-column:span 3}
.shot--w2{grid-column:span 2}
.shot--w4{grid-column:span 4}
.shot--h-tall{aspect-ratio:3/4}
.shot--h-wide{aspect-ratio:3/2}
.shot--h-sq{aspect-ratio:1/1}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(12,12,15,.94);
  align-items:center;justify-content:center;padding:clamp(16px,4vw,54px);
}
.lightbox[open],.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r);box-shadow:0 40px 90px -30px #000}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vw,30px);text-align:center;
  color:#D9D4CE;font-size:.92rem;padding-inline:20px;
}
.lightbox__btn{
  position:absolute;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:grid;place-items:center;transition:background-color .2s,transform .2s;
}
.lightbox__btn:hover{background:rgba(255,255,255,.2);transform:scale(1.05)}
.lightbox__close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lightbox__prev{left:clamp(10px,2.4vw,30px);top:50%;margin-top:-26px}
.lightbox__next{right:clamp(10px,2.4vw,30px);top:50%;margin-top:-26px}

/* =============================== 8 KONTAKT =============================== */
.contact{background:var(--paper-2)}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
.form{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);
  padding:clamp(24px,3vw,42px);box-shadow:var(--shadow-m);
}
.field{margin-bottom:18px}
.field:last-of-type{margin-bottom:0}
.field label{
  display:block;font-size:.86rem;font-weight:600;color:var(--ink-soft);
  margin-bottom:8px;letter-spacing:.005em;
}
.field .req{color:var(--red)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#CFC7BB}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;background:#fff;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(176,31,36,.13);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--red)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field__err{display:none;font-size:.83rem;color:var(--red);margin-top:6px;font-weight:500}
.field.has-err .field__err{display:block}
.field.has-err input,.field.has-err textarea{border-color:var(--red)}

.consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 24px;font-size:.88rem;color:var(--ink-soft);line-height:1.55}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--red)}
.consent a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
/* Das Ankreuzfeld hat keinen Rahmen, den man einfärben könnte, deshalb ein
   Ring darum. Vorher trug nur `.field` eine Fehlermarkierung; das Ankreuzfeld
   bekam zwar die Klasse, aber es gab keine Regel dazu. Die Meldung erschien
   also („Bitte prüfen Sie die rot markierten Felder"), ohne dass etwas rot war. */
.consent.has-err input{outline:2.5px solid var(--red);outline-offset:3px;border-radius:3px}
.consent.has-err .field__err{display:block}
.consent .field__err{margin-top:7px}

.form__note{margin-top:18px;font-size:.83rem;color:var(--muted);line-height:1.55}
.form__status{
  display:none;margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;
}
.form__status.is-ok{display:block;background:#EAF5EC;color:#1F6B34;border:1px solid #BEE0C6}
.form__status.is-err{display:block;background:#FBEBEC;color:#8A1519;border:1px solid #F0C9CB}

.contact__aside{display:flex;flex-direction:column;gap:clamp(18px,2vw,24px)}
.info-card{
  background:var(--graphite);color:#DCD7D1;border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px);
}
.info-card h3{color:#fff;margin-bottom:6px}
.info-list{display:grid;gap:18px;margin-top:24px}
.info-list li{display:flex;gap:15px;align-items:flex-start}
.info-list__ic{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(226,86,91,.16);color:var(--red-light);
}
.info-list b{display:block;font-family:'Space Grotesk',sans-serif;color:#fff;font-size:.8rem;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:3px}
.info-list a,.info-list>li>span:last-child>span{color:#DCD7D1;text-decoration:none;font-size:1.02rem;line-height:1.5}
.info-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.hours{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:clamp(22px,2.6vw,32px);box-shadow:var(--shadow-s)}
.hours h3{margin-bottom:16px}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:.96rem}
.hours dt{color:var(--muted)}
.hours dd{margin:0;text-align:right;font-weight:500}

/* --- CTA-Band mit Foto --- */
.cta-band{position:relative;overflow:hidden;background:var(--graphite);isolation:isolate}
.cta-band__bg{position:absolute;inset:0;z-index:-2}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(20,20,24,.94) 0%, rgba(20,20,24,.82) 42%, rgba(20,20,24,.5) 100%);
}
.cta-band__in{
  display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:clamp(24px,4vw,60px);
  align-items:center;padding-block:clamp(56px,7vw,96px);
}
.cta-band h2{color:#fff}
.cta-band p{color:#C8C3BC;margin-top:16px;max-width:52ch}
.cta-band__act{display:flex;flex-wrap:wrap;gap:14px}

/* ================================ 9 FUSS ================================= */
.site-footer{background:var(--graphite);color:#A9A49D;padding-top:clamp(56px,6vw,84px);position:relative}
.site-footer .fence-band{top:0;bottom:auto;transform:scaleY(-1);opacity:.14}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,52px);position:relative;
}
.footer__brand img{width:186px;margin-bottom:22px}
.footer__brand p{font-size:.94rem;line-height:1.7;max-width:36ch}
.footer h4,
.footer__h{
  font-family:'Space Grotesk',sans-serif;color:#fff;font-size:.78rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;margin:0 0 18px;
}
.footer__list{display:grid;gap:11px}
.footer__list a{color:#A9A49D;text-decoration:none;font-size:.95rem;transition:color .18s}
.footer__list a:hover{color:#fff}
.footer__bottom{
  margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.1);
  padding-block:26px;display:flex;flex-wrap:wrap;gap:12px 26px;
  align-items:center;justify-content:space-between;font-size:.86rem;
}
.footer__bottom a{color:#A9A49D;text-decoration:none}
.footer__bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 22px}

/* --- Kontakt-Knopf unten rechts (statt fester Leiste) -------------------
   Geschlossen nimmt er nur eine Ecke ein. Die Flächen liegen als
   Milchglas über dem Inhalt: halbdurchsichtig, weichgezeichnet, mit
   heller Kante – der Inhalt bleibt dahinter erahnbar.                     */
.fab{
  position:fixed;z-index:95;
  right:var(--rechts);
  bottom:var(--unten);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}

.fab__menu{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
/* Ohne diese Zeile bleibt das Menü trotz hidden-Attribut im Layout:
   die Regel oben schlaegt die Browser-Vorgabe [hidden]{display:none}.
   Die Eintraege waeren dann unsichtbar, aber weiterhin anklickbar. */
.fab__menu[hidden]{display:none}
.fab__item{
  display:flex;align-items:center;gap:13px;
  padding:11px 16px 11px 12px;border-radius:16px;
  text-decoration:none;color:var(--ink);
  background:rgba(252,251,249,.86);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 1px rgba(21,21,26,.05), 0 14px 38px -10px rgba(21,21,26,.38);
  backdrop-filter:blur(24px) saturate(1.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.9);
  transform:translateY(10px) scale(.94);opacity:0;
  /* geschlossen weder anklickbar noch mit der Tastatur erreichbar */
  visibility:hidden;pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .24s,
             background-color .2s, visibility 0s linear .32s;
  white-space:nowrap;
}
.fab.is-open .fab__item{
  transform:none;opacity:1;
  visibility:visible;pointer-events:auto;
  transition:transform .32s cubic-bezier(.2,.9,.3,1), opacity .24s,
             background-color .2s, visibility 0s;
}
.fab.is-open .fab__item:nth-child(3){transition-delay:.02s}
.fab.is-open .fab__item:nth-child(2){transition-delay:.06s}
.fab.is-open .fab__item:nth-child(1){transition-delay:.1s}
.fab__item:hover{background:rgba(255,255,255,.97)}
.fab__item-ic{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--red);color:#fff;
}
.fab__item-ic--wa{background:#25D366}
.fab__item b{display:block;font-family:'Space Grotesk',sans-serif;font-size:.97rem;
  font-weight:600;letter-spacing:-.015em;line-height:1.25}
.fab__item small{display:block;font-size:.78rem;color:var(--muted);line-height:1.35}

.fab__btn{
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 17px;border-radius:999px;cursor:pointer;
  background:var(--red);color:#fff;border:1px solid rgba(255,255,255,.28);
  font-family:'Space Grotesk',sans-serif;font-size:.98rem;font-weight:600;letter-spacing:-.01em;
  /* Der untere Rand des Scheins liegt bei Versatz minus Spreizung plus halber
     Weichzeichnung, also 14 - 12 + 16 = 18 Punkte unter dem Knopf. Das muss
     in den Abstand aus --unten passen (26 Punkte), sonst schneidet die
     Browserleiste den Schein mit einer harten Kante ab. Vorher waren es
     16 - 12 + 18 = 22 Punkte Schein bei 16 Punkten Abstand, und genau die
     fehlenden sechs Punkte waren auf dem iPhone zu sehen. */
  box-shadow:0 2px 4px rgba(120,10,15,.2), 0 14px 32px -12px rgba(176,31,36,.75);
  transition:transform .26s cubic-bezier(.2,.9,.3,1), background-color .2s, padding .26s;
}
.fab__btn:hover{transform:translateY(-2px)}
.fab__btn:active{transform:none}
.fab__btn-ic{width:24px;height:24px;flex:none}
.fab .fab__btn-ic--close{display:none}
.fab.is-open .fab__btn{background:var(--ink);padding-inline:17px 20px}
.fab.is-open .fab__btn-ic--open{display:none}
.fab.is-open .fab__btn-ic--close{display:grid}

/* Fläche zum Schliessen, sobald das Menü offen ist */
.fab__scrim{
  position:fixed;inset:0;z-index:94;border:0;padding:0;
  background:rgba(21,21,26,.22);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s;cursor:default;
}
.fab__scrim.is-on{opacity:1}
.fab__scrim[hidden]{display:none}

/* Menü auf schmalen Bildschirmen */
.mobilemenu{
  position:fixed;inset:0;z-index:98;
  background:var(--paper);
  padding:calc(150px + env(safe-area-inset-top)) var(--pad) calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  animation:mmIn .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobilemenu__in{width:min(1240px,100%);margin-inline:auto;display:flex;flex-direction:column;min-height:100%}
.mobilemenu__links{display:grid;gap:2px}
.mobilemenu__links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 4px;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-size:1.12rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);border-bottom:1px solid var(--line-soft);
}
.mobilemenu__links a::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--red);border-top:2px solid var(--red);transform:rotate(45deg);
}
.mobilemenu__links a:active{color:var(--red)}
.mobilemenu__foot{margin-top:auto;padding-top:16px;display:grid;gap:8px}
.mobilemenu__foot .btn{min-height:52px}
.mobilemenu__mail{
  text-align:center;font-size:.92rem;color:var(--muted);text-decoration:none;padding:4px;
}
.mobilemenu__mail b{color:var(--ink);font-weight:600}
@media (min-width:1181px){ .mobilemenu{display:none !important} }

/* ============================ 10 UNTERSEITEN ============================= */
.page-head{
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  padding-block:clamp(48px,6vw,86px) clamp(36px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.breadcrumb{display:flex;gap:10px;align-items:center;font-size:.86rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--red)}

.prose{max-width:74ch;font-size:1.02rem;line-height:1.75}
.prose h2{font-size:clamp(1.4rem,2.1vw,1.8rem);margin:44px 0 14px}
.prose h3{font-size:1.12rem;margin:30px 0 10px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose ul{margin:0 0 16px}
.prose ul{list-style:disc;padding-left:22px}
.prose li{margin-bottom:7px}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink)}
/* Tabellen bekommen einen eigenen Scrollbereich. Auf schmalen Bildschirmen
   passen drei Spalten sonst nicht, und die letzte wird abgeschnitten. */
.prose .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px}
.prose .tw table{margin-bottom:0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--ink)}
.prose .box{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:0 0 22px;
}

.error-hero{
  min-height:62vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(56px,8vw,110px);
}
.error-hero__no{
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(5rem,16vw,11rem);line-height:.85;letter-spacing:-.05em;
  color:var(--red);opacity:.16;margin-bottom:-.12em;
}

.thanks{text-align:center;max-width:640px;margin-inline:auto}
.thanks__ic{
  width:84px;height:84px;border-radius:50%;margin:0 auto 28px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--red),var(--red-deep));color:#fff;
  box-shadow:0 18px 40px -16px rgba(176,31,36,.7);
}

/* ========================= 11 BEWEGUNG UND MOBIL ========================= */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal-d1.is-in{transition-delay:.08s}
.reveal-d2.is-in{transition-delay:.16s}
.reveal-d3.is-in{transition-delay:.24s}
.reveal-d4.is-in{transition-delay:.32s}
.reveal-d5.is-in{transition-delay:.4s}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- ab 1180 px ---------- */
@media (max-width:1180px){
  .nav__links{display:none}
  .burger{display:grid}
  .nav{min-height:74px}
  .footer__grid{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:span 3}
}

/* ---------- ab 1000 px ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:38px;padding-bottom:clamp(168px,22vw,210px)}
  .hero__media{max-width:520px;width:100%}
  .hero__badge{left:auto;right:-14px;bottom:-22px}
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:1fr;gap:22px}
  .feature{grid-template-columns:1fr 1fr}
  .feature__main{grid-row:auto;grid-column:span 2;aspect-ratio:16/9}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step:nth-child(2n){border-right:0;padding-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .planner__grid{grid-template-columns:1fr;gap:22px}
  /* Die Zeichnung klebt beim Scrollen oben – jede Änderung an den Reglern
     darunter ist sofort im Bild zu sehen, ohne Zurückscrollen. */
  .planner__preview{
    position:sticky;top:var(--stick);z-index:4;
    margin-inline:calc(-1 * var(--pad));
    padding:10px var(--pad) 14px;
    background:linear-gradient(180deg,var(--graphite) 0%,var(--graphite) 96%,rgba(25,25,29,0) 100%);
  }
  .cfg-card{border-radius:var(--r-lg)}
  .cfg-read{
    padding:11px 16px;gap:4px 14px;flex-wrap:nowrap;align-items:center;
  }
  .cfg-read__dim{font-size:.78rem;line-height:1.35;flex:1 1 auto;min-width:0}
  .cfg-read__price b{font-size:1.02rem}
  .cfg-read__price span{display:none}
  .split{grid-template-columns:1fr;gap:34px}
  .split--media-first .split__media{order:0}
  .split__inset{right:-10px;bottom:-18px;width:38%}
  .quotes{grid-template-columns:1fr}
  .area{grid-template-columns:1fr;gap:28px}
  .contact__grid{grid-template-columns:1fr}
  .cta-band__in{grid-template-columns:1fr;gap:28px}
  .sect-head--split{grid-template-columns:1fr;gap:18px;align-items:start}
}

/* ---------- ab 760 px ---------- */
@media (max-width:760px){
  :root{--stick:100px}
  body{font-size:16px}
  /* Tippflächen auf mindestens rund 44 px bringen */
  .cfg-range{height:44px}
  .cfg-range::-webkit-slider-thumb{margin-top:-15.5px}
  .consent input{width:24px;height:24px}
  .consent{gap:14px}
  .arrow-link{padding-block:7px}
  /* In der Kopfzeile bleibt nur der Anruf-Knopf – die Nummer steht gross
     in der Ruf-Leiste am unteren Rand. */
  .nav__tel>span:last-child{display:none}
  .nav__tel{gap:0}
  .eyebrow{font-size:.72rem;letter-spacing:.12em;margin-bottom:16px}
  .btn--lg{padding:17px 22px;min-height:56px;font-size:1rem}
  .hero__title{font-size:clamp(2.1rem,8.4vw,2.9rem)}
  .topbar__in{justify-content:center}
  .topbar__list{gap:16px;justify-content:center}
  .topbar__item--hide{display:none}
  .trustbar__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .ptabs{grid-template-columns:1fr;gap:6px;padding:6px}
  .ptab{min-height:52px;font-size:.95rem}
  .feature{grid-template-columns:1fr}
  .feature__main{grid-column:auto}
  .feature__side{aspect-ratio:16/10}
  .upload__face{padding:15px 14px;gap:12px}
  .upload__face small{font-size:.78rem}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .services{grid-template-columns:1fr}
  /* Unter 760 px einspaltig. Zwei oder vier Spalten wuerden die Reihe aus
     drei Quadraten zerreissen und wieder Luecken am Zeilenende erzeugen. */
  /* Unter 760 px einspaltig. Zwei oder vier Spalten wuerden die Reihe aus
     drei Quadraten zerreissen und wieder Luecken am Zeilenende erzeugen. */
  .gallery{grid-template-columns:1fr}
  .shot--w2,.shot--w3,.shot--w4{grid-column:span 1}
  .shot--h-sq,.shot--h-tall{aspect-ratio:3/2}
  .field-row{grid-template-columns:1fr;gap:0}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  /* Auf dem Handy etwas enger an die Ecke, aber weiter ueber die Variablen.
     Vorher stand hier `bottom:14px` fest verdrahtet, ohne Geraeterand. Damit
     war die ganze Rechnung fuer den unteren Rand auf genau den Geraeten
     ausgehebelt, fuer die sie gedacht war: Auf dem iPhone blieben 14 Punkte
     Luft, der rote Schein reicht aber 18 Punkte nach unten, und die
     Browserleiste schnitt ihn mit einer harten Kante ab. */
  :root{
    --unten:  calc(24px + env(safe-area-inset-bottom, 0px));
    --rechts: calc(14px + env(safe-area-inset-right, 0px));
    --links:  calc(14px + env(safe-area-inset-left, 0px));
  }
  .fab__btn{height:52px;padding:0 18px 0 15px;font-size:.94rem}
  .site-footer{padding-bottom:26px}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:span 2}
  .quote{padding:22px}
  .hero__badge{position:static;margin-top:16px;max-width:none;width:100%}
  .cfg-color{width:40px;height:40px}

  /* Auf dem Handy eine senkrechte Schiene mit Punkten – liest sich wie
     ein Ablauf und braucht keine Bilder. */
  .steps{grid-template-columns:1fr;border-top:0;padding-left:26px;position:relative}
  .steps::before{
    content:"";position:absolute;left:4px;top:8px;bottom:14px;
    width:1px;background:var(--line);
  }
  .step{
    padding:0 0 clamp(24px,5vw,32px) 0;border-right:0;border-bottom:0;
  }
  .step:last-child{padding-bottom:0}
  .step::before{left:-26px;top:14px}
  .step__no{
    font-size:1.5rem;-webkit-text-stroke:1.2px var(--red);
    margin-bottom:6px;letter-spacing:-.03em;
  }
  .step__title{font-size:1.12rem;margin-bottom:7px}
  .step__text{font-size:.94rem;margin-bottom:10px}
}

/* ---------- ab 620 px ---------- */
@media (max-width:620px){
  .prose th,.prose td{padding:9px 10px;font-size:.88rem}
  /* Zweispaltig blieben je Punkt nur rund 100 px für den Text übrig –
     der Satz lief dann über acht Zeilen. */
  .trustbar__grid{grid-template-columns:1fr;gap:18px}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- ab 460 px ---------- */
@media (max-width:460px){
  .nav__logo img{width:140px}
  .figures{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .figure b{font-size:2.2rem}
  .figure span{font-size:.86rem}
}

/* ---------- sehr schmale Geräte und starker Zoom ----------
   Ab hier zählt nicht mehr das Handy, sondern WCAG 1.4.10: Der Inhalt muss
   auf 320 Bildpunkten Breite lesbar bleiben, was auch dem 400-Prozent-Zoom
   auf einem 1280er Bildschirm entspricht.

   `white-space:nowrap` in der Hero-Überschrift war dort ein echtes Problem:
   Die Zeile „Beides aus einer Hand." liess sich nicht umbrechen, dadurch
   wuchs die Gitterspalte auf 341 Punkte, und der rechte Rand von Überschrift,
   Text und Knöpfen wurde abgeschnitten. Auf schmalen Geräten darf sie also
   umbrechen. Die Gitterspalten bekommen zusätzlich minmax(0,…), damit sie nie
   breiter werden als der Platz, den sie haben. */
@media (max-width:400px){
  .hero__title em{white-space:normal}
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__title{font-size:clamp(1.95rem,9.4vw,2.35rem)}
}

/* --- Hinweis „ohne Cookies" ---------------------------------------------

   Kein Einwilligungsbanner. Die Seite legt nichts auf dem Gerät ab, also gibt
   es nichts einzuwilligen, und eine Frage zu stellen, die keine ist, wäre
   irreführend. Der Hinweis sagt nur, dass hier nichts passiert.

   Deshalb auch kein dunkler Schleier und keine Sperre: Er liegt unten links,
   der Kontaktknopf sitzt unten rechts, und die Seite bleibt die ganze Zeit
   bedienbar. Auf schmalen Geräten rückt er über den Kontaktknopf, sonst
   überdecken sich beide.                                                  */
.cookiehint{
  position:fixed;z-index:94;
  left:var(--links);
  bottom:var(--unten);
  width:min(370px, calc(100vw - 32px));
  background:var(--graphite);color:#E8E4DE;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:17px 18px 15px;
  box-shadow:0 14px 40px -18px rgba(0,0,0,.6);   /* reicht 16 Punkte nach unten, siehe --unten */
  transform:translateY(14px);opacity:0;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .32s;
}
.cookiehint.is-an{transform:none;opacity:1}
.cookiehint[hidden]{display:none}
.cookiehint__kopf{
  display:flex;align-items:center;gap:9px;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:600;font-size:1.01rem;color:#fff;margin-bottom:7px;
}
.cookiehint__kopf svg{flex:none;color:var(--red-light)}
.cookiehint p{font-size:.875rem;line-height:1.55;color:#B8B3AC;margin:0}
.cookiehint a{color:#E8E4DE;text-decoration:underline;text-underline-offset:2px}
.cookiehint a:hover{color:#fff}
.cookiehint__fuss{display:flex;align-items:center;gap:14px;margin-top:13px}
.cookiehint__ok{
  border:0;cursor:pointer;border-radius:999px;
  background:var(--red);color:#fff;
  font:600 .87rem/1 'Space Grotesk',system-ui,sans-serif;
  padding:10px 18px;transition:background-color .18s;
}
.cookiehint__ok:hover{background:var(--red-bright)}
.cookiehint :focus-visible{outline:3px solid var(--red-light);outline-offset:3px}

@media (max-width:620px){
  .cookiehint{
    right:var(--rechts);
    width:auto;
    /* über dem Kontakt-Knopf: dessen Höhe 56 plus 12 Punkte Abstand */
    bottom:calc(var(--unten) + 68px);
  }
  /* Auf dem Handy grössere Trefferfläche für den Daumen */
  .cookiehint__ok{padding:13px 20px}
}

/* ---------- weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  .cookiehint{transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .site-header,.fab,.fence-band,.planner,.lightbox,.cta-band,.cookiehint{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:18pt}
}

/* ============================ 11 3D-ANSICHT ============================== */
/* Der Knopf sitzt über der Zeichnung im Terrassen-Planer. Die Ebene selbst
   wird erst gebaut, wenn jemand draufdrückt (js/view3d.js). */

.cfg-stage{position:relative}
.cfg-3d{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;min-height:40px;
  font:600 .84rem/1 'Space Grotesk','Inter',sans-serif;letter-spacing:-.01em;
  color:#fff;background:rgba(25,25,29,.62);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;cursor:pointer;
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  transition:background .2s, border-color .2s, transform .2s;
}
.cfg-3d:hover{background:rgba(25,25,29,.82);border-color:rgba(255,255,255,.42)}
.cfg-3d:active{transform:scale(.97)}
.cfg-3d.is-laedt{opacity:.6;pointer-events:none}
/* .cfg-stage svg{width:100%} gilt für die Planer-Zeichnung. Das Symbol im
   Knopf steckt in derselben Fläche und muss davon ausgenommen werden. */
.cfg-3d svg{flex:none;width:17px;height:17px;display:block}

.view3d{
  position:fixed;inset:0;z-index:300;
  /* Auf iOS rechnet inset:0 mit dem grossen Fenster, also dem ohne
     Adressleiste. Die Leiste unten rutschte dadurch aus dem Bild.
     100dvh ist die tatsaechlich sichtbare Hoehe; Browser ohne dvh
     ignorieren die Zeile und bleiben bei inset:0. */
  height:100dvh;
  /* Ohne das zieht man beim Drehen den Text der Leiste mit und der Zeiger
     springt auf den Textcursor. */
  -webkit-user-select:none;user-select:none;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--graphite);
}
.view3d[hidden]{display:none}
.view3d__kopf{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px clamp(14px,3vw,26px);border-bottom:1px solid rgba(255,255,255,.1);
  background:var(--graphite);position:relative;z-index:2;
}
.view3d__titel{
  margin:0;color:#fff;font:600 .95rem/1.4 'Space Grotesk','Inter',sans-serif;
  letter-spacing:-.01em;
}
.view3d__zu{
  flex:none;width:42px;height:42px;display:grid;place-items:center;
  color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:50%;cursor:pointer;
  transition:background .2s;
}
.view3d__zu:hover{background:rgba(255,255,255,.2)}
.view3d__bild{
  display:block;width:100%;height:100%;
  min-height:0;max-height:100%;
  cursor:grab;touch-action:none;outline:0;
}
.view3d__bild.is-greifend{cursor:grabbing}
.view3d__bild:focus-visible{outline:3px solid var(--red-light);outline-offset:-3px}
/* Eigener deckender Grund, sonst stehen die Knöpfe auf der Zeichnung und
   sind über hellem Himmel nicht mehr zu erkennen. */
.view3d__fuss{
  padding:14px clamp(14px,3vw,26px) calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,.1);
  background:var(--graphite);position:relative;z-index:2;
}
.view3d__regler{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.view3d__gruppe{display:flex;flex-wrap:wrap;gap:8px}
.view3d__opt{
  padding:9px 15px;min-height:40px;
  font:500 .86rem/1 'Inter',sans-serif;color:#E8E4DE;
  background:#33333A;border:1px solid #6E6E78;
  border-radius:999px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.view3d__opt:hover{background:#43434C;color:#fff;border-color:#8A8A95}
.view3d__opt[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.view3d__gruppe--farben{gap:9px}
.view3d__farbe{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid #6E6E78;transition:transform .18s,border-color .18s;
}
.view3d__farbe:hover{transform:scale(1.08)}
.view3d__farbe[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.view3d__tipp{
  margin:12px 0 0;color:#A19C94;font-size:.84rem;line-height:1.5;max-width:70ch;
}

@media (max-width:620px){
  .cfg-3d{top:10px;right:10px;padding:8px 12px;min-height:36px;font-size:.78rem}
  .view3d__titel{font-size:.82rem}
  .view3d__regler{gap:8px 12px}
  .view3d__opt{padding:8px 12px;min-height:36px;font-size:.8rem}
  .view3d__tipp{margin-top:9px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .cfg-3d,.view3d__zu,.view3d__opt,.view3d__farbe{transition:none}
}