/* =====================================================
   business+design AG - Style
   Farben: Gelb #F5B31B | Schwarz #000 | Weiss #FFF
   ===================================================== */

/* =====================================================
   FONTS - Myriad Pro (lokal)
   Pfade enthalten Leerzeichen -> als %20 kodiert
   ===================================================== */

/* --- Normalbreite --- */
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Light/Myriad%20Pro%20Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Regular/Myriad%20Pro%20Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Italic/Myriad%20Pro%20Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Semibold/Myriad%20Pro%20Semibold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Bold/Myriad%20Pro%20Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Bold%20Italic/Myriad%20Pro%20Bold%20Italic.ttf") format("truetype");
  font-weight:700; font-style:italic; font-display:block;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("Myriad%20Pro/Myriad%20Pro%20Black/Myriad%20Pro%20Black.otf") format("opentype");
  font-weight:900; font-style:normal; font-display:block;
}

/* --- Condensed (für die Kundenliste) --- */
@font-face{
  font-family:"Myriad Pro Cond";
  src:url("Myriad%20Pro/Myriad%20Pro%20Condensed/Myriad%20Pro%20Condensed.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro Cond";
  src:url("Myriad%20Pro/Myriad%20Pro%20Bold%20Condensed/Myriad%20Pro%20Bold%20Condensed.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:block;
}
@font-face{
  font-family:"Myriad Pro Cond";
  src:url("Myriad%20Pro/Myriad%20Pro%20Black%20Condensed/Myriad%20Pro%20Black%20Condensed.otf") format("opentype");
  font-weight:900; font-style:normal; font-display:block;
}

:root{
  --yellow:#F5B31B;
  --black:#000000;
  --white:#ffffff;
  --grey-text:#333333;
  --grey-dark:#3a3a3a;
  --font: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cond: "Myriad Pro Cond", "Arial Narrow", Arial, sans-serif;
  --wrap: 1100px;
  --wrap2: 1400px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:54px;}

/* =====================================================
   SCROLL-EFFEKTE
   ===================================================== */

/* Fortschrittsbalken am oberen Fensterrand */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  z-index:100;
  width:100%;
  height:3px;
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  height:100%;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* Grundzustand aller einblendenden Elemente.
   --i staffelt Geschwister; wird im HTML gesetzt. */
.reveal{
  opacity:0;
  transform:translateY(38px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i, 0) * 110ms);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Kundenliste: Namen blenden einzeln auf, Delay kommt aus script.js.
   Bewusst nur opacity - ein transform bräuchte inline-block und würde
   verhindern, dass lange Namen wie im Vorbild umbrechen. */
.clientlist span{
  opacity:0;
  transition:opacity .55s ease;
}
.clientlist.is-visible span{opacity:1;}

/* Hero-Ebenen werden per JS transformiert */
.hero-inner,
.hero-frame{will-change:transform;}

/* Einblenden beim Seitenaufbau: Headline sofort, Logo kurz danach.
   "both" hält die Elemente vor dem Start unsichtbar. */
@keyframes fadeIn{
  from{opacity:0;}
  to  {opacity:1;}
}
.hero-title{animation:fadeIn .9s ease 0s both;}
.hero-logo {animation:fadeIn .9s ease .35s both;}
.hero-cta  {animation:fadeIn .9s ease .55s both;}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keine Animation */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,
  .clientlist span{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .scroll-progress{display:none;}
  .slider-track{transition:none !important;}
  .vital-scale span:first-child{transform:none !important;transition:none !important;}
  .localpin::after{animation:none;}
  .compare.is-switching .compare-layer{transition:none !important;}
  /* kein verzögertes Einblenden - sofort sichtbar */
  .hero-title,
  .hero-logo,
  .hero-cta{animation:none;opacity:1;}
}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  color:var(--grey-text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px;
}
/* breitere Variante - für Abschnitte mit vier grossen Bildspalten */
.wrap--wide{max-width:var(--wrap2);}

.center{text-align:center;}

/* =====================================================
   HERO
   ===================================================== */

.hero{
  /* Die Hoehe steuert alles: Das Hintergrundbild ist hoehenbestimmt
     (cover bei einem 3.29:1-Bild in einem flacheren Fenster), und der
     Sucher-Rahmen unten rechnet mit demselben Wert. */
  --hero-h:660px;
  --bild-seiten:3.2874;                        /* 3797 / 1155 */

  /* Abstand der rechten Rahmenkante zur Bildkante, Anteil der Bildbreite.
     Steht hier statt beim Rahmen, weil auch die Bildverschiebung ihn braucht. */
  --fright:.2762;

  /* Verschiebung nach rechts: Anteil, um den Bild und Rahmen näher an den
     rechten Rand rücken. 0 = Figuren wie gewohnt, .4 = der Abstand rechts
     neben dem Rahmen schrumpft um 40 %. Gilt bis 1439px, darüber 0 (unten). */
  --hero-shift:.4;

  /* Bildbreite: mindestens höhenbestimmt (660px x 3.2874 = 2170px) - aber
     so breit, dass das nach rechts verschobene Bild links trotzdem bis an
     den Rand reicht. Daraus folgen Bildhöhe und Verschiebung in Pixeln. */
  --bild-b:max(calc(var(--hero-h) * var(--bild-seiten)),
               calc(100vw / (1 - var(--hero-shift) * var(--fright))));
  --bild-h:calc(var(--bild-b) / var(--bild-seiten));
  --bild-s:calc(var(--hero-shift) * var(--fright) * var(--bild-b));

  position:relative;
  min-height:var(--hero-h);
  background-color:#111;
  /* Verlauf dunkelt nur die linke Seite ab, damit die Headline steht;
     das Foto selbst bleibt rechts unangetastet.
     Das Foto hat eine feste, berechnete Breite statt cover - nur so
     bleibt der Rahmen bei jeder Fensterbreite auf denselben Figuren. */
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,0) 58%),
    url("images/chess.png");
  background-size:cover, var(--bild-b) auto;
  background-position:center, calc(100% + var(--bild-s)) center;
  background-repeat:no-repeat, no-repeat;
}

/* breite Fenster: Bild ohne Verschiebung - der Rahmen rechnet mit
   derselben Formel und bleibt trotzdem auf den Figuren */
@media (min-width:1440px){
  .hero{--hero-shift:0;}
}

.hero-inner{
  max-width:var(--wrap2);
  margin:0 auto;
  padding:70px 20px 46px;
  position:relative;
  min-height:640px;
}

.hero-title{
  margin:0;
  font-family:var(--font);
  font-weight:900;
  font-size:95px;
  line-height:1.02;
  letter-spacing:-.5px;
  text-transform:uppercase;
  color:var(--yellow);
}

/* --- b&d Logo (Bilddatei, Claim ist darin enthalten) --- */
.hero-logo{
  position:absolute;
  left:20px;
  bottom:32px;
  display:block;
  width:212px;
}
.hero-logo img{
  width:100%;
  height:auto;
}

/* --- Hero-Button: unten rechts, Unterkante bündig mit dem Logo --- */
.hero-cta{
  position:absolute;
  right:20px;
  bottom:32px;
}

/* Eckwinkel - Grundform (Sucher-Motiv), wird pro Einsatzort überschrieben */
.corner{
  position:absolute;
  width:16px;
  height:16px;
  border:0 solid var(--yellow);
}
.corner.tl{top:0;left:0;border-top-width:4px;border-left-width:4px;}
.corner.tr{top:0;right:0;border-top-width:4px;border-right-width:4px;}
.corner.bl{bottom:0;left:0;border-bottom-width:4px;border-left-width:4px;}
.corner.br{bottom:0;right:0;border-bottom-width:4px;border-right-width:4px;}


/* Grosser Sucher-Rahmen über den Schachfiguren.

   WICHTIG: Die Masse hängen am Bild, nicht am Fenster. Das Foto ist
   rechts verankert und höhenbestimmt - die Figuren stehen deshalb immer
   im selben Pixelabstand zur rechten Kante. Würde der Rahmen wie früher
   in Prozent der Fensterbreite sitzen, wanderte er beim Verkleinern von
   den Figuren weg. Darum: Abstand von rechts, Breite aus der Bildbreite.

   Ist das Bild breiter als höhenbestimmt (breite Fenster oder
   Verschiebung), wird es auch höher und vertikal zentriert - top und
   height rechnen deshalb mit der Bildhöhe statt mit der Hero-Höhe.

   ---- Feinjustage über diese Werte (--fright steht bei .hero) ---- */
.hero-frame{
  --fw:.1516;      /* Rahmenbreite, Anteil der Bildbreite           */
  --fy:.30;        /* Abstand von oben, Anteil der Bildhöhe         */
  --fh:.52;        /* Rahmenhöhe, Anteil der Bildhöhe               */
  --farm:52px;     /* Länge der Winkelarme */
  --fthick:11px;   /* Strichstärke         */

  position:absolute;
  top:calc((var(--hero-h) - var(--bild-h)) / 2 + var(--fy) * var(--bild-h));
  left:auto;
  /* um dieselbe Strecke wie das Bild nach rechts verschoben */
  right:calc(var(--fright) * var(--bild-b) - var(--bild-s));
  width:calc(var(--fw) * var(--bild-b));
  height:calc(var(--fh) * var(--bild-h));
  pointer-events:none;
}
.hero-frame .corner{
  width:var(--farm);
  height:calc(var(--farm) * .78);
  border-color:rgba(214,214,214,.78);
}
.hero-frame .corner.tl{border-top-width:var(--fthick);border-left-width:var(--fthick);}
.hero-frame .corner.tr{border-top-width:var(--fthick);border-right-width:var(--fthick);}
.hero-frame .corner.bl{border-bottom-width:var(--fthick);border-left-width:var(--fthick);}
.hero-frame .corner.br{border-bottom-width:var(--fthick);border-right-width:var(--fthick);}

/* =====================================================
   NAVIGATION
   ===================================================== */

.mainnav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--black);
  border-top:1px solid #1c1c1c;
  transition:box-shadow .3s, background .3s;
}
/* Zustand, sobald die Leiste oben andockt */
.mainnav.is-stuck{
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 22px rgba(0,0,0,.55);
}
.mainnav > ul{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px;
  list-style:none;
  display:flex;
  justify-content:center;
  gap:58px;
  height:44px;
  align-items:center;
}
.mainnav > ul > li > a{
  color:var(--white);
  font-size:14px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transition:color .18s;
}
.mainnav > ul > li > a:hover{color:var(--yellow);}
.mainnav > ul > li > a.active{color:#7c7c7c;}

/* =====================================================
   MEGA-MENÜS "LEISTUNGEN" UND "PRODUKTE"
   Das Panel wird an .mainnav ausgerichtet (sticky = eigener
   Bezugsrahmen) und läuft deshalb über die volle Fensterbreite.
   ===================================================== */

/* über die volle Leistenhöhe, damit zwischen Trigger und Panel
   keine Lücke entsteht, in der die Maus das Menü verliert */
.has-mega{
  align-self:stretch;
  display:flex;
  align-items:center;
}

.mega-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--white);
  cursor:pointer;
  transition:color .18s;
}
/* aktueller Bereich - muss vor der Hover-Regel stehen, damit
   Hover und offener Zustand trotzdem gelb gewinnen */
.mega-trigger.is-current{color:#7c7c7c;}

.mega-trigger:hover,
.has-mega.is-open .mega-trigger{color:var(--yellow);}
.mega-trigger:focus-visible{outline:2px solid var(--yellow);outline-offset:6px;}

.mega-caret{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .26s;
}
.has-mega.is-open .mega-caret{transform:rotate(180deg);}

/* Panel - geschlossen per visibility, damit die Links darin
   auch für die Tastatur nicht erreichbar sind */
.mega{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--white);
  border-top:3px solid var(--yellow);
  box-shadow:0 24px 46px rgba(0,0,0,.24);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .26s ease,
             transform .26s cubic-bezier(.2,.7,.2,1),
             visibility .26s;
}
.has-mega.is-open .mega{
  opacity:1;
  visibility:visible;
  transform:none;
}

.mega-inner{
  max-width:var(--wrap2);
  margin:0 auto;
  padding:38px 20px 42px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  text-align:left;
}

/* Kategorie - verlinkt, im Klammer-Motiv der Sektion.
   Beim Überfahren füllt sich die Fläche gelb; die Klammern gehen darin
   auf und der Titel wird zum zusammenhängenden gelben Feld. */
.mega-title{
  --parm:8px;
  --pthick:3px;
  position:relative;
  display:inline-block;
  margin:0 0 12px;
  padding:5px calc(var(--parm) + 8px);
  font-family:var(--font-cond);
  font-weight:900;
  font-size:18px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
  transition:background .22s;
}
.mega-title:hover,
.mega-title:focus-visible{background:var(--yellow);}
.mega-title:focus-visible{outline:2px solid var(--black);outline-offset:2px;}

.mega-lead{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.5;
  color:#6b6b6b;
}

.mega-links{
  list-style:none;
  margin:0;
  padding:0;
}
.mega-links a{
  position:relative;
  display:block;
  padding:6px 0;
  font-size:13px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--grey-text);
  transition:color .2s, padding-left .24s cubic-bezier(.2,.7,.2,1);
}
/* gelber Strich fährt beim Überfahren von links ein */
.mega-links a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:3px;
  margin-top:-1px;
  background:var(--yellow);
  transition:width .24s cubic-bezier(.2,.7,.2,1);
}
.mega-links a:hover,
.mega-links a:focus-visible,
.mega-links a.is-current{
  color:var(--black);
  padding-left:26px;
}
.mega-links a:hover::before,
.mega-links a:focus-visible::before,
.mega-links a.is-current::before{width:16px;}
.mega-links a:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}

/* die Kategorie, auf der man gerade steht */
.mega-title.is-current{background:var(--yellow);}

/* Produkte haben keine Unterpunkte - der Satz ist der Inhalt */
.mega--produkte .mega-lead{margin-bottom:14px;max-width:30ch;}
/* fünf Produkte: eine Spalte mehr als bei den vier Leistungsbereichen */
.mega--produkte .mega-inner{grid-template-columns:repeat(5,1fr);gap:30px;}
.mega-more{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--black);
}
.mega-more::after{
  content:"\203A";
  display:inline-block;
  margin-left:8px;
  font-size:15px;
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
}
.mega-col:hover .mega-more::after{transform:translateX(5px);}

/* =====================================================
   ZURUECK NACH OBEN
   Der Knopf wird von script.js erzeugt und liegt auf jeder Seite.
   ===================================================== */

.to-top{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  background:var(--yellow);
  color:var(--black);
  cursor:pointer;
  /* geschlossen per visibility - so ist er auch für die Tastatur weg */
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .28s ease,
             transform .28s cubic-bezier(.2,.7,.2,1),
             visibility .28s,
             background .2s;
}
.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.to-top.is-visible:hover{
  background:#ffc844;
  transform:translateY(-3px);
}
.to-top:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.to-top svg{
  width:20px;
  height:20px;
  fill:currentColor;
}

/* =====================================================
   SEITENKOPF DER UNTERSEITEN
   Logo links, Navigation auf der Grundlinie des Claims.
   position:relative macht den Kopf zum Bezugsrahmen für das
   Mega-Panel - das läuft dadurch unter dem ganzen Kopf auf.
   ===================================================== */

.pagehead{
  position:relative;
  z-index:60;
  background:var(--black);
  transition:box-shadow .45s, background .45s;
}
.pagehead-inner{
  max-width:var(--wrap2);
  margin:0 auto;
  padding:40px 20px 34px;
  display:flex;
  align-items:flex-end;
  gap:76px;
  transition:padding .45s cubic-bezier(.22,.61,.36,1), gap .45s cubic-bezier(.22,.61,.36,1);
}
/* Breite über --logo-w, die Höhe folgt dem Seitenverhältnis des grossen
   Logos (1536 × 1024). Feste Höhe statt height:auto, damit sie sich beim
   Schrumpfen weich mitverändern lässt. */
.pagehead-logo{
  --logo-w:230px;
  flex:0 0 auto;
  display:block;
  position:relative;
  overflow:hidden;
  width:var(--logo-w);
  height:calc(var(--logo-w) * .6667);
  transition:width .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1);
}
.pagehead-logo img{display:block;width:100%;height:auto;}
.pagehead-logo .logo-full{transition:opacity .3s ease .05s;}
/* Das kleine Zeichen deckt sich mit den Klammern des grossen Logos:
   Klammern dort ab x 32/1536, Breite 1473/1536 - im kleinen Bild mit
   2 px Rand auf 532 px. Daraus: 96.63 % breit, 1.72 % eingerückt. */
.pagehead-logo .logo-mark{
  position:absolute;
  top:0;
  left:1.72%;
  width:96.63%;
  opacity:0;
  transition:opacity .25s ease;
}

/* --- Geschrumpfter Kopf beim Scrollen (Klasse setzt script.js) --- */
.pagehead-space.is-fixed .pagehead{
  position:fixed;
  top:0;
  left:0;
  right:0;
}
.pagehead.is-compact{
  background:rgba(0,0,0,.94);
  /* hier unbedenklich: das Mega-Panel richtet sich ohnehin am Kopf aus */
  backdrop-filter:blur(8px);
  box-shadow:0 2px 22px rgba(0,0,0,.55);
}
.pagehead.is-compact .pagehead-inner{padding-top:12px;padding-bottom:12px;gap:44px;align-items:center;}
.pagehead.is-compact .pagehead-logo{
  width:76px;
  /* nur noch die Klammern: Höhe des kleinen Zeichens */
  height:39px;
}
.pagehead.is-compact .logo-full{opacity:0;transition-delay:0s;}
.pagehead.is-compact .logo-mark{opacity:1;}
/* beim Messen und beim Laden ohne Übergang */
.pagehead.no-anim,
.pagehead.no-anim *,
.mainnav.no-anim,
.mainnav.no-anim *{transition:none !important;}

/* Sprungmarken nicht unter dem fixierten Kopf verstecken */
html:has(.pagehead){scroll-padding-top:84px;}

/* =====================================================
   KLEINES LOGO IN DER LEISTE DER STARTSEITE
   ===================================================== */
.mainnav-brand{
  position:absolute;
  top:50%;
  /* bündig mit dem grossen Logo im Hero (wrap2, 20 px Rand) */
  left:max(20px, calc((100% - var(--wrap2)) / 2 + 20px));
  width:76px;
  opacity:0;
  visibility:hidden;
  transform:translate(-10px, -50%);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility 0s linear .45s;
}
.mainnav-brand img{display:block;width:100%;height:auto;}
.mainnav.is-stuck .mainnav-brand{
  opacity:1;
  visibility:visible;
  transform:translate(0, -50%);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
/* Angedockt sieht die Leiste aus wie der geschrumpfte Kopf der
   Unterseiten: gleiche Höhe, gleiches Logo, Menüpunkte linksbündig
   daneben. Die Masse unten spiegeln .pagehead.is-compact - bei
   Änderungen beide Stellen anpassen. Das Umsortieren der Punkte
   animiert script.js; den Höhenunterschied gleicht es mit einem
   negativen Aussenabstand aus, damit der Inhalt nicht springt. */
.mainnav.is-stuck > ul{
  max-width:var(--wrap2);
  height:63px;
  justify-content:flex-start;
  /* 20 px Rand + 76 px Logo + 44 px Abstand */
  padding:0 20px 0 140px;
  gap:48px;
}
@media (max-width:1100px){
  .mainnav.is-stuck > ul{gap:clamp(16px, 2.6vw, 48px);}
}
@media (max-width:900px){
  .mainnav-brand{left:16px;}
  /* 16 px Rand + 76 px Logo + 18 px Abstand */
  .mainnav.is-stuck > ul{padding:0 16px 0 110px;gap:10px;}
  .mainnav.is-stuck > ul > li > a,
  .mainnav.is-stuck .mega-trigger{font-size:13px;letter-spacing:.3px;}
}
@media (max-width:600px){
  .mainnav-brand{width:58px;}
  /* 16 px Rand + 58 px Logo + 18 px Abstand, Menü zweizeilig */
  .mainnav.is-stuck > ul{height:auto;padding:10px 16px 10px 92px;gap:2px 14px;line-height:22px;flex-wrap:wrap;}
  .mainnav.is-stuck > ul > li > a,
  .mainnav.is-stuck .mega-trigger{font-size:12px;letter-spacing:.4px;}
}

/* Navigation ohne eigene Leiste - sie sitzt im Kopf */
.mainnav--inline{
  position:static;
  z-index:auto;
  background:none;
  border-top:0;
  box-shadow:none;
  /* ohne Innenabstand sitzt die Schriftlinie der Navigation auf der
     Grundlinie von "Manufaktur für Sichtbarkeit" */
  padding-bottom:0;
}
.mainnav--inline > ul{
  max-width:none;
  margin:0;
  padding:0;
  /* sechs Menüpunkte: schmalerer Abstand als in der Leiste der Startseite,
     damit die Navigation neben dem Logo einzeilig bleibt */
  gap:48px;
  height:auto;
  flex-wrap:wrap;
  justify-content:flex-start;
}
/* WICHTIG: backdrop-filter würde hier einen eigenen Bezugsrahmen aufspannen -
   das Mega-Panel klebte dann an der Navigation statt am ganzen Kopf. */
.mainnav--inline.is-stuck{
  background:none;
  backdrop-filter:none;
  box-shadow:none;
}

/* =====================================================
   KATEGORIESEITE - Einleitung
   ===================================================== */

.catintro{padding:66px 0 60px;}

.catintro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.catintro .display-title{margin-bottom:26px;}

/* Anreisser - gross, dunkel, maximal zwei Zeilen */
.catlead{
  margin:0 0 24px;
  font-size:22px;
  line-height:1.45;
  font-weight:600;
  color:var(--black);
}

/* Fliesstext bewusst schmal halten: rund 60 Zeichen pro Zeile
   lesen sich am angenehmsten */
.catbody p{
  margin:0 0 17px;
  max-width:58ch;
  font-size:17px;
  line-height:1.75;
  color:var(--grey-text);
}
.catbody p:last-child{margin-bottom:0;}

.catintro-img img{
  width:100%;
  height:auto;
}

/* =====================================================
   KATEGORIESEITE - die drei Leistungen
   ===================================================== */

.offers{
  background:#f7f7f7;
  padding:62px 0 72px;
}

.offers-title{
  margin:0 0 32px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}

.offer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
/* Kategorien mit vier Leistungen: eine Reihe statt drei plus eine */
.offer-grid.offer-grid--four{grid-template-columns:repeat(4,1fr);}

.offer{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  padding:32px 30px 30px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
/* gelbe Oberkante, die beim Überfahren über die ganze Karte läuft */
.offer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:64px;
  height:4px;
  background:var(--yellow);
  transition:width .34s cubic-bezier(.2,.7,.2,1);
}
.offer:hover,
.offer:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.13);
}
.offer:hover::before,
.offer:focus-visible::before{width:100%;}
.offer:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}

.offer-num{
  margin-bottom:12px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  color:#bdbdbd;
}
.offer-name{
  margin-bottom:14px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:24px;
  line-height:1.1;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.offer-text{
  flex:1 1 auto;        /* schiebt "Mehr erfahren" bei allen auf eine Linie */
  margin-bottom:22px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--grey-text);
}
.offer-more{
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--black);
}
.offer-more::after{
  content:"\203A";
  display:inline-block;
  margin-left:9px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.offer:hover .offer-more::after{transform:translateX(5px);}

/* Produktseiten: Funktionen sind keine Links - daher ohne Anheben */
.offer--static:hover{transform:none;box-shadow:none;}
.offer--static .offer-name,
.offer--static .offer-text{margin-top:0;}
.offer--static .offer-text{margin-bottom:0;}

/* Link im Fliesstext der Einleitung */
.catbody a{
  font-weight:600;
  color:var(--black);
  box-shadow:inset 0 -3px 0 var(--yellow);
  transition:box-shadow .22s;
}
.catbody a:hover{box-shadow:inset 0 -1.2em 0 var(--yellow);}

/* Produktseiten: Abschluss mit Aufruf */
.product-cta{padding:64px 0 72px;text-align:center;}
.product-cta-title{
  margin:0 0 14px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(26px, 2.6vw, 36px);
  line-height:1.1;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.product-cta .lead{margin-bottom:28px;}

/* =====================================================
   SECTIONS
   ===================================================== */

.section{padding:52px 0 60px;}
.section--light{background:var(--white);}
.section--dark{background:var(--black);color:var(--white);}

.section-title{
  margin:0 0 26px;
  text-align:center;
  font-size:32px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--yellow);
}
.section-title--yellow{color:var(--yellow);}

/* Text folgt direkt unter der Überschrift */
.section-title--tight{margin-bottom:3px;}

/* Kleiner Vorspann: gelber Balken + gesperrte Versalien */
.eyebrow{
  display:flex;
  align-items:center;
  gap:20px;
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3.4px;
  text-transform:uppercase;
  color:var(--black);
}
.eyebrow-bar{
  flex:0 0 auto;
  width:32px;
  height:5px;
  background:var(--yellow);
}

/* Grosse, linksbündige Display-Headline */
.display-title{
  margin:0 0 46px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(28px, 2.9vw, 42px);
  line-height:1.05;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--black);
}

/* Fliesstext */
.lead{
  max-width:720px;
  margin:0 auto 30px;
  text-align:center;
  font-size:17px;
  line-height:1.7;
  color:var(--grey-text);
}
.lead--light{color:#d8d8d8;}

/* Button */
.btn{
  display:inline-block;
  background:var(--yellow);
  color:var(--black);
  font-size:15px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:12px 26px;
  transition:background .18s;
}
.btn{transition:background .22s, transform .22s, box-shadow .22s;}
.btn:hover{
  background:#ffc844;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(245,179,27,.35);
}
.btn:active{transform:translateY(0);}

/* =====================================================
   LEISTUNGSSEITE (z. B. Fotografie)
   ===================================================== */

.leistung-intro{padding:62px 0 54px;}
.leistung-outro{padding:56px 0 64px;}

/* --- Überschrift im Sucher-Rahmen, zentriert --- */
.headline-bracket{
  --barm:16px;    /* Länge der waagrechten Winkelarme */
  --bthick:7px;   /* Strichstärke */
  position:relative;
  display:table;          /* schrumpft auf Textbreite, Winkel sitzen bündig */
  margin:0 auto 26px;
  /* horizontales Padding = Armlänge + Abstand zum Text */
  padding:14px 24px;
  text-align:center;
  white-space:nowrap;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:30px;
  line-height:1.1;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--yellow);
}

/* je Seite zwei Eckwinkel mit Lücke dazwischen (Sucher-Motiv) */
.headline-bracket .br{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--barm);
}
.headline-bracket .br::before,
.headline-bracket .br::after{
  content:"";
  position:absolute;
  width:var(--barm);
  height:17px;
  border:0 solid var(--yellow);
}
.headline-bracket .br::before{top:0;}
.headline-bracket .br::after{bottom:0;}

.headline-bracket .br-left{left:0;}
.headline-bracket .br-left::before{left:0;border-top-width:var(--bthick);border-left-width:var(--bthick);}
.headline-bracket .br-left::after{left:0;border-bottom-width:var(--bthick);border-left-width:var(--bthick);}

.headline-bracket .br-right{right:0;}
.headline-bracket .br-right::before{right:0;border-top-width:var(--bthick);border-right-width:var(--bthick);}
.headline-bracket .br-right::after{right:0;border-bottom-width:var(--bthick);border-right-width:var(--bthick);}

/* --- Die vier Bereiche: Sprungmarken auf die Galerien --- */
.areas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:34px;
}
.area{display:block;}

.area-label{
  display:block;
  margin-bottom:12px;
  padding:7px 4px;
  background:var(--yellow);
  color:var(--black);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-align:center;
  transition:background .25s, letter-spacing .3s;
}
.area:hover .area-label,
.area:focus-visible .area-label{
  background:#ffc844;
  letter-spacing:2.2px;
}
.area-text{
  display:block;
  font-size:15px;
  line-height:1.5;
  color:var(--grey-text);
}
.area:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;}

/* --- Galerieabschnitte --- */
.gallery-block{
  padding:54px 0 58px;
  /* nur eine feine Trennung zwischen zwei schwarzen Abschnitten */
  border-top:1px solid #1c1c1c;
}
.gallery-block:first-of-type{border-top:0;}

.gallery-title{
  margin:0 0 8px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--yellow);
}
.gallery-lead{
  max-width:62ch;
  margin:0 0 28px;
  font-size:16px;
  line-height:1.6;
  color:#cfcfcf;
}

/* Raster: ein grosses Bild über zwei Spalten und zwei Zeilen,
   die übrigen fünf füllen die restlichen Felder. Die Zeilenhöhe
   geben die kleinen Kacheln über ihr Seitenverhältnis vor. */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.shot{
  position:relative;
  overflow:hidden;
  margin:0;
  aspect-ratio:4 / 3;
  background:#141414;
}
.shot--big{
  grid-column:span 2;
  grid-row:span 2;
  aspect-ratio:auto;   /* Höhe kommt aus den zwei Zeilen daneben */
}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.shot:hover img{transform:scale(1.05);}

/* =====================================================
   LIGHTBOX
   Markup und Bedienung stehen in include/lightbox.js.
   ===================================================== */

/* anklickbare Bilder zeigen das auch */
.lb-ziel{cursor:zoom-in;}
.lb-ziel:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:-3px;
}

/* Seite hinter der Lightbox nicht mitscrollen lassen */
body.lb-offen{overflow:hidden;}

.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(0,0,0,.93);
}
.lb.is-open{display:flex;}

.lb-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  width:100%;
  max-width:1500px;
}

.lb-figure{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
}
.lb-figure img{
  max-width:100%;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Pfeile und Schliessen im selben gelben Motiv wie die Bildstrecken */
.lb-prev,
.lb-next,
.lb-close{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:var(--yellow);
  color:var(--black);
  line-height:1;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.lb-prev,
.lb-next{
  width:54px;
  height:54px;
  padding-bottom:4px;
  font-size:40px;
}
.lb-prev:hover,
.lb-next:hover,
.lb-close:hover{background:#ffc844;}
.lb-prev:hover{transform:translateX(-3px);}
.lb-next:hover{transform:translateX(3px);}

.lb-close{
  position:absolute;
  top:22px;
  right:22px;
  width:46px;
  height:46px;
  font-size:30px;
}
.lb-prev:focus-visible,
.lb-next:focus-visible,
.lb-close:focus-visible{outline:3px solid var(--white);outline-offset:3px;}

.lb-count{
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:2.4px;
  color:#c9c9c9;
}

/* =====================================================
   KONTAKTFENSTER
   Markup und Bedienung stehen in include/kontaktformular.js.
   ===================================================== */

.kontakt-modal{
  width:min(660px, calc(100% - 32px));
  max-height:calc(100vh - 48px);
  padding:0;
  border:0;
  background:var(--white);
  color:var(--grey-text);
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.kontakt-modal::backdrop{background:rgba(0,0,0,.72);}

.kontakt-modal-inner{
  position:relative;
  padding:38px 40px 34px;
}
/* gelber Balken als Kante - dasselbe Motiv wie beim Mega-Menü */
.kontakt-modal-inner::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:var(--yellow);
}

.kontakt-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  background:none;
  color:#8a8a8a;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:color .2s;
}
.kontakt-modal-close:hover{color:var(--black);}
.kontakt-modal-close:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}

.kontakt-modal-eyebrow{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:#8a8a8a;
}
.kontakt-modal .contact-head{margin-bottom:22px;}

.kontakt-modal-alt{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid #e4e4e4;
  font-size:14px;
  color:#6b6b6b;
}
.kontakt-modal-alt a{
  font-weight:600;
  color:var(--black);
  border-bottom:2px solid var(--yellow);
}
.kontakt-modal-alt a:hover{background:var(--yellow);}

/* =====================================================
   SICHTBARKEITSCHECK
   Das Einstiegsangebot. Markup steckt in
   include/sichtbarkeitscheck.js.
   ===================================================== */

.check{
  background:var(--yellow);
  color:var(--black);
  padding:58px 0 62px;
}

.check-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:56px;
  align-items:start;
}

.check-eyebrow{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3.2px;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
}
.check-title{
  margin:0;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1.05;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
  /* Trennstrich im Wort nur nutzen, wenn es eng wird */
  hyphens:manual;
}
.check-rule{
  display:block;
  width:40px;
  height:4px;
  margin:18px 0 16px;
  background:var(--black);
}
.check-lead{
  max-width:46ch;
  margin:0 0 26px;
  font-size:17px;
  line-height:1.65;
  color:#2a2a2a;
}
/* Knopf auf gelbem Grund: schwarz statt gelb */
.check-cta .btn{
  background:var(--black);
  color:var(--yellow);
}
.check-cta .btn:hover{
  background:#1c1c1c;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}

.check-steps{
  display:grid;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:none;
}
.check-steps li{
  padding-top:18px;
  border-top:2px solid rgba(0,0,0,.25);
}
.check-num{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:15px;
  letter-spacing:1.4px;
  color:rgba(0,0,0,.5);
}
.check-steps h3{
  margin:0 0 6px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:21px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.check-steps p{
  margin:0;
  max-width:52ch;
  font-size:15.5px;
  line-height:1.6;
  color:#2a2a2a;
}

/* =====================================================
   UEBER UNS
   ===================================================== */

/* Grundsätze - gleiche Bausteine wie die Bereiche der Leistungsseite,
   nur ohne Bild und ohne Verlinkung. */
.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
}

/* --- Team --- */
.team-section{padding:58px 0 64px;}

.team{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px 22px;
  margin-top:38px;
}

.member{margin:0;}

.member-photo{
  overflow:hidden;
  aspect-ratio:1 / 1;
  margin-bottom:14px;
  background:#1a1a1a;
}
.member-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* wie bei den Kundenstimmen: Farbe erst beim Überfahren */
  filter:grayscale(100%);
  transition:filter .45s ease, transform .45s ease;
}
.member:hover .member-photo img{
  filter:grayscale(0%);
  transform:scale(1.04);
}

/* Wo noch kein echtes Porträt vorliegt: Initialen statt Stock-Silhouette.
   Sobald das Foto da ist, hier wieder ein <img> einsetzen. */
.member-photo--initialen{
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #2e2e2e;
  background:#141414;
}
.member-photo--initialen span{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:54px;
  letter-spacing:1px;
  color:var(--yellow);
}

.member-name{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  color:var(--white);
}
.member-role{
  margin:3px 0 6px;
  font-size:13px;
  line-height:1.4;
  color:#a9a9a9;
}
.member-tel{
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--yellow);
}
.member-tel:hover{text-decoration:underline;text-underline-offset:3px;}

/* --- Haltung: Zitat und was uns ausmacht --- */
.stance{padding:56px 0 60px;}

.stance-quote{
  max-width:44ch;
  margin:0 auto 46px;
  text-align:center;
}
.stance-quote p{
  margin:0 0 16px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.25;
  letter-spacing:.2px;
  color:var(--black);
}
/* Anführungszeichen in Gelb, wie bei den Kundenstimmen */
.stance-quote p::before{content:"\00AB ";color:var(--yellow);}
.stance-quote p::after{content:" \00BB";color:var(--yellow);}
.stance-quote footer{
  font-size:13px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:#8a8a8a;
}

.usp{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}
.usp li{
  padding-top:16px;
  border-top:4px solid var(--yellow);
  font-size:15px;
  line-height:1.5;
  color:var(--grey-text);
}
.usp strong{
  display:block;
  margin-bottom:5px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:20px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}

/* --- Netzwerk --- */
.network{padding:54px 0 56px;}

.network-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:50px;
  align-items:center;
}
.network-title{
  margin:0 0 14px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.network-text{
  max-width:58ch;
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:var(--grey-text);
}
.network-logos{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

/* =====================================================
   KONTAKT
   ===================================================== */

/* hellgraues Band über die ganze Breite - wie die Grundsätze auf
   der Seite "Über uns" */
.contact{
  background:#f7f7f7;
  padding:56px 0 66px;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:60px;
  align-items:start;
}

.contact-head{
  margin:0 0 24px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:24px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.contact-sub{
  margin:34px 0 8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--black);
}
.contact-note{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--grey-text);
}
.contact-note a,
.contact-map a{
  border-bottom:2px solid var(--yellow);
  transition:background .2s;
}
.contact-note a:hover,
.contact-map a:hover{background:var(--yellow);}

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
}
.contact-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
  font-size:16px;
  line-height:1.5;
  color:var(--grey-text);
}
.contact-list svg{
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin-top:2px;
  fill:var(--yellow);
}
.contact-list a:hover{text-decoration:underline;text-underline-offset:3px;}
.contact-map{margin:6px 0 0;font-size:15px;}

/* =====================================================
   KONTAKTSEITE - Einstieg, Satz-Formular als Nachricht, direkte Wege
   ===================================================== */

/* --- Einstieg --- */
.kontakt-hero{ padding:64px 0 74px; }
.kontakt-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.kontakt-hero-title{
  margin:0 0 26px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(46px, 6vw, 90px);
  line-height:.95;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--black);
}
.kontakt-hero-lead{
  max-width:34em;
  margin:0 0 30px;
  font-size:19px;
  line-height:1.6;
  color:var(--grey-text);
}
.kontakt-hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 26px;
  margin:0;
}
.kontakt-hero-tel{
  font-size:15px;
  font-weight:600;
  color:var(--black);
  border-bottom:2px solid var(--yellow);
  transition:background .2s;
}
.kontakt-hero-tel:hover{ background:var(--yellow); }

/* --- Sucher-Rahmen mit tippenden Sätzen --- */
.kontakt-sucher{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:340px;
  padding:48px 46px;
  background:var(--black);
  color:var(--white);
}
.kontakt-sucher .corner{
  position:absolute;
  width:56px;
  height:56px;
  border:0 solid var(--yellow);
}
.kontakt-sucher .corner.tl{ top:-12px; left:-12px;  border-top-width:8px; border-left-width:8px; }
.kontakt-sucher .corner.tr{ top:-12px; right:-12px; border-top-width:8px; border-right-width:8px; }
.kontakt-sucher .corner.bl{ bottom:-12px; left:-12px;  border-bottom-width:8px; border-left-width:8px; }
.kontakt-sucher .corner.br{ bottom:-12px; right:-12px; border-bottom-width:8px; border-right-width:8px; }

.kontakt-sucher-kicker{
  margin:0 0 20px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#9a9a9a;
}
.kontakt-tippen{
  /* Platz für zwei Zeilen, damit nichts springt, wenn ein längerer
     Satz umbricht */
  min-height:2.3em;
  margin:0 0 26px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(28px, 2.9vw, 42px);
  line-height:1.15;
  color:var(--white);
}
.kontakt-tippen-text::before{ content:"«"; color:var(--yellow); }
.kontakt-tippen-text::after { content:"»"; color:var(--yellow); }
.kontakt-tippen-cursor{
  display:inline-block;
  width:.09em;
  height:.95em;
  margin-left:4px;
  vertical-align:-.1em;
  background:var(--yellow);
  animation:cursor-blinken 1s steps(1) infinite;
}
@keyframes cursor-blinken{ 50%{ opacity:0; } }
.kontakt-sucher-antwort{
  margin:0;
  padding-top:18px;
  border-top:1px solid #2a2a2a;
  font-size:16px;
  font-weight:600;
  color:var(--yellow);
}

/* --- Satz-Formular als handgeschriebener Brief --- */
.satzform-section{
  background:var(--yellow);
  padding:84px 0 92px;
  overflow:hidden;
}
.brief{
  /* Handschrift: vorerst Systemschriften (Windows: Segoe Print,
     macOS: Bradley Hand / Noteworthy). Wird "Caveat" lokal eingebunden,
     greift sie automatisch zuerst. */
  --hand:"Caveat", "Segoe Print", "Bradley Hand", "Noteworthy", "Marker Felt", cursive;
  --tinte:#1f3f8f;         /* eigene Angaben in blauer Tinte */
  --graphit:#2f2f2f;       /* vorgedruckter Brieftext */
  --zeile:48px;            /* Zeilenabstand = Linienabstand des Papiers */
  position:relative;
  max-width:900px;
  margin:0 auto;
}

.brief-papier{
  position:relative;
  --oben:calc(var(--zeile) * 1.25);
  padding:var(--oben) 64px var(--zeile);
  background-color:#fffdf6;
  /* feine Linien wie auf Briefpapier, auf den Zeilenabstand gelegt */
  background-image:repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--zeile) - 1px),
    #dfe6ee calc(var(--zeile) - 1px), #dfe6ee var(--zeile));
  /* Linie knapp unter der Schriftlinie jeder Zeile */
  background-position:0 calc(var(--oben) - 8px);
  box-shadow:0 34px 60px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.08);
  transform:rotate(-.6deg);
  font-family:var(--hand);
  font-size:25px;
  line-height:var(--zeile);
  color:var(--graphit);
  transition:transform .7s cubic-bezier(.6,.05,.4,1), opacity .6s ease;
}
/* Klebestreifen oben */
.brief-papier::before{
  content:"";
  position:absolute;
  top:-16px;
  left:50%;
  width:150px;
  height:36px;
  margin-left:-75px;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transform:rotate(-3deg);
}
.brief p{ margin:0; }
.brief .sr{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.brief-kopf{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:var(--zeile);
}
.brief-an{ font-size:.9em; }
.brief-datum{ font-size:.9em; white-space:nowrap; }
.brief-betreff{
  margin-bottom:var(--zeile) !important;
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

.satzform-satz{ margin-bottom:0; }

/* Lücken: gestrichelte Linie, Eingabe in blauer Tinte */
.satzform-luecke{ display:inline; }
.satzform-luecke input,
.satzform-luecke select{
  min-width:4ch;
  max-width:100%;
  height:calc(var(--zeile) - 10px);
  margin:0 3px;
  padding:0 4px;
  border:0;
  border-bottom:2px dashed #9fb0c8;
  border-radius:0;
  background-color:transparent;
  font-family:var(--hand);
  font-size:1.08em;
  line-height:1;
  color:var(--tinte);
  vertical-align:baseline;
  transition:border-color .2s, background-color .2s;
  appearance:none;
}
.satzform-luecke input::placeholder{ color:#b7b2a7; }
.satzform-luecke select{
  cursor:pointer;
  padding-right:26px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5c2 2 4 4.5 6 5.5 2-1 4-3.5 6-5.5' fill='none' stroke='%231f3f8f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.satzform-luecke select option{ font-family:var(--font); font-size:16px; color:var(--black); }
.satzform-luecke input:focus,
.satzform-luecke select:focus{
  outline:none;
  border-bottom:2px solid var(--yellow);
  background-color:rgba(245,179,27,.12);
}

/* Die Nachricht: schreibt direkt auf die Linien des Papiers */
.satzform-block{ display:block; }
.satzform-block textarea{
  display:block;
  width:100%;
  min-height:calc(var(--zeile) * 4);
  margin:0;
  padding:0 4px;
  border:0;
  border-left:3px solid transparent;
  border-radius:0;
  background:transparent;
  font-family:var(--hand);
  font-size:1.08em;
  line-height:var(--zeile);
  color:var(--tinte);
  resize:none;
  overflow:hidden;
  transition:border-color .2s, background-color .2s;
}
.satzform-block textarea::placeholder{ color:#b7b2a7; }
.satzform-block textarea:focus{
  outline:none;
  border-left-color:var(--yellow);
  background-color:rgba(245,179,27,.06);
}

/* Einverständnis als "Ach ja:" im Brief */
.satzform-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:var(--zeile) !important;
  font-size:.82em;
}
.satzform-check input{
  flex:0 0 auto;
  width:22px;
  height:22px;
  margin-top:13px;
  accent-color:var(--tinte);
  cursor:pointer;
}
.satzform-check a{ color:var(--graphit); text-decoration:underline; text-underline-offset:4px; }
.brief-ps{ font-weight:700; }

/* Gruss links, Briefmarke rechts */
.brief-schluss{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-top:var(--zeile);
}
.brief-unterschrift{
  min-height:calc(var(--zeile) * 1.3);
  font-size:1.6em;
  line-height:calc(var(--zeile) * 1.3);
  color:var(--tinte);
  transform:rotate(-3deg);
  transform-origin:left center;
}
.brief-unterschrift:empty::before{ content:"Ihr Name"; color:#cfcabf; }

/* Briefmarke mit gezackter Kante - der Absende-Knopf */
.brief-marke{
  position:relative;
  flex:0 0 auto;
  width:132px;
  padding:7px;
  border:0;
  /* Zacken: Löcher im Rand, durch die das Papier scheint */
  background:
    radial-gradient(circle at 7px 7px, transparent 4px, var(--yellow) 4.5px) -7px -7px / 14px 14px;
  box-shadow:0 6px 14px rgba(0,0,0,.14);
  transform:rotate(5deg);
  cursor:pointer;
  font:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.brief-marke-innen{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  height:136px;
  padding:16px 8px 10px;
  background:var(--yellow);
  outline:2px solid rgba(0,0,0,.18);
  outline-offset:-6px;
}
.brief-marke-text{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:28px;
  line-height:.95;
  text-transform:uppercase;
  color:var(--black);
}
.brief-marke-wert{
  font-family:var(--font);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  line-height:1.2;
  color:rgba(0,0,0,.6);
}
.brief-marke:hover,
.brief-marke:focus-visible{
  transform:rotate(0) scale(1.06);
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.brief-marke:focus-visible{ outline:3px solid var(--black); outline-offset:4px; }

/* fehlende Pflichtangabe */
.satzform-luecke.is-fehlt input,
.satzform-luecke.is-fehlt select{ border-bottom:2px solid #c0392b; background-color:rgba(192,57,43,.08); }
.satzform-block.is-fehlt textarea{ border-left-color:#c0392b; background-color:rgba(192,57,43,.05); }
.satzform-check.is-fehlt label{ color:#c0392b; }
.satzform-fehler{
  margin-top:calc(var(--zeile) * .5) !important;
  font-family:var(--font);
  font-size:15px;
  line-height:1.4;
  font-weight:600;
  color:#c0392b;
}

/* unsichtbares Messfeld für die mitwachsenden Lücken */
.satzform-messer{
  position:absolute;
  top:0; left:0;
  visibility:hidden;
  white-space:pre;
  pointer-events:none;
}

.satzform-klassisch-zeile{
  margin:34px 0 0 !important;
  text-align:center;
}
.satzform-klassisch{
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  color:var(--black);
  border-bottom:2px solid var(--black);
}
.satzform-klassisch:hover{ background:rgba(255,255,255,.4); }

/* Absenden: der Brief fliegt davon, dann kommt die Bestätigung */
.brief.is-fliegt .brief-papier{
  transform:translateY(-60px) rotate(-8deg) scale(.9);
  opacity:0;
}
.brief.is-gesendet .brief-papier,
.brief.is-gesendet .satzform-klassisch-zeile{ display:none; }
.satzform-danke{
  max-width:640px;
  margin:0 auto;
  padding:52px 48px 56px;
  background:var(--white);
  box-shadow:0 30px 60px rgba(0,0,0,.14);
  font-size:19px;
  line-height:1.6;
  color:var(--grey-text);
  text-align:center;
  animation:danke-rein .5s cubic-bezier(.2,.7,.2,1) both;
}
.satzform-danke:focus{ outline:none; }
.satzform-danke p{ margin:0; }
.satzform-danke-titel{
  margin:0 0 12px !important;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:48px;
  line-height:1;
  text-transform:uppercase;
  color:var(--black);
}
@keyframes danke-rein{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* --- Direkte Wege --- */
.kontakt-wege{ padding:66px 0 74px; }
.kontakt-wege-title{
  margin:0 0 30px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(28px, 2.9vw, 42px);
  line-height:1.05;
  text-transform:uppercase;
  color:var(--black);
}
.kontakt-wege-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:26px;
}
.kontakt-weg{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:30px 28px 28px;
  background:#f7f7f7;
  color:var(--black);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s;
}
/* gelbe Oberkante läuft beim Überfahren ein - wie bei den Leistungskarten */
.kontakt-weg::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:0;
  height:4px;
  background:var(--yellow);
  transition:width .4s cubic-bezier(.2,.7,.2,1);
}
.kontakt-weg:hover,
.kontakt-weg:focus-visible{
  background:var(--white);
  box-shadow:0 18px 38px rgba(0,0,0,.1);
  transform:translateY(-3px);
}
.kontakt-weg:hover::before,
.kontakt-weg:focus-visible::before{ width:100%; }
.kontakt-weg:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }

.kontakt-weg-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:#6b6b6b;
}
.kontakt-weg-gross{
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(22px, 1.9vw, 28px);
  line-height:1.15;
  overflow-wrap:anywhere;
}
.kontakt-weg-text{
  font-size:15px;
  line-height:1.55;
  color:var(--grey-text);
}
.kontakt-weg-person{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  line-height:1.45;
  color:var(--grey-text);
}
.kontakt-weg-person img{
  flex:0 0 auto;
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--yellow);
}
.kontakt-wege-team{
  margin:28px 0 0;
  font-size:15px;
  color:var(--grey-text);
}
.kontakt-wege-team a{ border-bottom:2px solid var(--yellow); transition:background .2s; }
.kontakt-wege-team a:hover{ background:var(--yellow); }

@media (max-width:900px){
  .kontakt-hero{ padding:44px 0 56px; }
  .kontakt-hero-grid{ grid-template-columns:1fr; gap:48px; }
  .kontakt-sucher{ min-height:0; padding:40px 32px; margin:0 12px; }
  .kontakt-wege-grid{ grid-template-columns:1fr; gap:16px; }
  .satzform-section{ padding:56px 0 64px; }
  .brief-papier{ --oben:var(--zeile); padding:var(--oben) 34px calc(var(--zeile) * .8); transform:none; }
}
@media (max-width:600px){
  .kontakt-hero-lead{ font-size:17px; }
  .kontakt-sucher{ padding:34px 24px; }
  .satzform-section{ padding:40px 0 48px; }
  .brief{ --zeile:40px; }
  .brief-papier{ --oben:var(--zeile); padding:var(--oben) 18px calc(var(--zeile) * .6); font-size:20px; }
  .brief-kopf{ flex-direction:column-reverse; gap:0; }
  .brief-schluss{ flex-wrap:wrap; }
  .brief-marke{ width:112px; }
  .brief-marke-innen{ height:116px; }
  .brief-marke-text{ font-size:24px; }
  .satzform-danke{ padding:40px 22px 44px; }
  .satzform-danke-titel{ font-size:36px; }
}
@media (prefers-reduced-motion:reduce){
  .kontakt-tippen-cursor,
  .satzform-danke{ animation:none; }
}

/* --- Formular --- */
.form-row--two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.form-field{margin:0 0 18px;}
.form-field label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--black);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #d6d6d6;
  border-radius:0;
  background:var(--white);
  font-family:inherit;
  font-size:16px;
  color:var(--grey-text);
  transition:border-color .2s, box-shadow .2s;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(245,179,27,.25);
}

.form-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:6px 0 14px;
  font-size:14px;
  line-height:1.5;
  color:var(--grey-text);
}
.form-check input{
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--yellow);
}
.form-check a{
  border-bottom:2px solid var(--yellow);
}
.form-check a:hover{background:var(--yellow);}

.form-hint{
  margin:0 0 20px;
  font-size:13px;
  color:#8a8a8a;
}

/* =====================================================
   REFERENZEN
   ===================================================== */

.ref-intro{padding:62px 0 46px;}
.ref-list{padding:0 0 20px;}

/* --- Die Kundenwahl: gelbe Felder als Sprungmarken --- */
.ref-chips{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:38px;
}
.ref-chip{
  display:block;
  padding:8px 6px;
  background:var(--yellow);
  color:var(--black);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-align:center;
  transition:background .22s, letter-spacing .3s, transform .22s;
}
.ref-chip:hover,
.ref-chip:focus-visible{
  background:#ffc844;
  letter-spacing:2px;
  transform:translateY(-2px);
}
.ref-chip:focus-visible{outline:3px solid var(--black);outline-offset:3px;}

/* --- Eine einzelne Arbeit --- */
.ref{
  padding:44px 0 48px;
  /* feine Linie zwischen den Arbeiten, wie in der Vorlage */
  border-top:1px solid #d8d8d8;
}
.ref:first-child{border-top:0;padding-top:8px;}

.ref-name{
  margin:0 0 8px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--yellow);
}
.ref-text{
  max-width:70ch;
  margin:0 0 28px;
  font-size:16px;
  line-height:1.6;
  color:var(--grey-text);
}

/* --- Bildstrecke mit Pfeilen links und rechts --- */
.ref-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.ref-stage .slider{
  flex:1 1 auto;
  max-width:780px;
}

/* Blätterpfeile: gelbe Fläche mit schwarzem Winkel - auf Weiss wie auf
   dunklem Grund sofort als Bedienelement erkennbar. */
.slider-arrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  padding:0 0 4px;          /* optischer Ausgleich der Zeichenhöhe */
  border:0;
  background:var(--yellow);
  color:var(--black);
  font-size:40px;
  line-height:1;
  cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.slider-arrow:hover{
  background:#ffc844;
  box-shadow:0 8px 18px rgba(245,179,27,.35);
}
.slider-prev:hover{transform:translateX(-3px);}
.slider-next:hover{transform:translateX(3px);}
.slider-arrow:active{transform:none;}
.slider-arrow:focus-visible{outline:3px solid var(--black);outline-offset:3px;}

.ref-slide{
  flex:0 0 100%;
}
/* contain statt cover: Projektbilder haben unterschiedliche Formate und
   sollen vollständig zu sehen sein, nicht angeschnitten. */
.ref-shot{
  margin:0;
  aspect-ratio:16 / 9;
  background:#f4f4f4;
}
.ref-shot img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* =====================================================
   LEISTUNGSSEITE - zweite Fassung
   Titel in Schwarz, vier Bereiche als Paare aus Text und Bild,
   Galerien als Bildstrecke mit Balken zum Blättern.
   ===================================================== */

/* grosse Variante der Sucher-Überschrift - Farbe bleibt Gelb wie im Grundstil */
.headline-bracket--big{
  --barm:20px;
  --bthick:8px;
  margin-bottom:16px;
  padding:16px 30px;
  font-size:clamp(28px, 3.4vw, 46px);
}
.headline-bracket--big .br::before,
.headline-bracket--big .br::after{
  width:var(--barm);
  height:22px;
}

.subclaim{
  margin:0 auto 0;
  text-align:center;
  font-size:21px;
  line-height:1.35;
  font-weight:600;
  color:var(--black);
}

/* kurzer gelber Strich als Trenner unter dem Claim */
.rule-center{
  display:block;
  width:30px;
  height:3px;
  margin:20px auto 24px;
  background:var(--yellow);
}

/* --- Die vier Bereiche: links Text, rechts Bild --- */
.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px 60px;
  margin-top:46px;
}

.field{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:26px;
  align-items:start;
}

.field-num{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:20px;
  letter-spacing:.5px;
  color:var(--yellow);
}
.field-title{
  margin:0;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:27px;
  line-height:1.1;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--black);
}
.field-rule{
  display:block;
  width:28px;
  height:3px;
  margin:14px 0 16px;
  background:var(--yellow);
  transition:width .3s cubic-bezier(.2,.7,.2,1);
}
.field:hover .field-rule{width:52px;}

.field-text{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.55;
  color:var(--grey-text);
}

/* Pfeil als Schriftzeichen - spart eine Grafik und erbt die Textfarbe */
.field-more::after{
  content:"\2192";
  display:inline-block;
  font-size:22px;
  line-height:1;
  color:var(--black);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.field:hover .field-more::after{transform:translateX(7px);}

.field-img{
  overflow:hidden;
  aspect-ratio:1 / 1;
  background:#eee;
}
.field-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.field:hover .field-img img{transform:scale(1.05);}
.field:focus-visible{outline:3px solid var(--yellow);outline-offset:6px;}

/* =====================================================
   TESTVARIANTE der vier Themen  ->  .fields--linie
   Derzeit nur auf angebot-fotografie.html im Einsatz.

   RUECKBAU in drei Schritten:
     1. im HTML die Klasse "fields--linie" entfernen
     2. dort die vier Spans wieder leeren:
        <span class="field-more" aria-hidden="true"></span>
     3. diesen Block hier löschen
   Der Grundzustand der Themen bleibt davon unberührt.
   ===================================================== */

.fields--linie{
  position:relative;
  isolation:isolate;          /* damit der Farbgrund unten nicht wegrutscht */
  gap:46px 56px;
}

/* leicht warmer Grund über die volle Fensterbreite.
   50vw zählt die Scrollleiste mit, der Grund ragt darum rund 8px über den
   rechten Fensterrand hinaus - das ergab einen waagrechten Scrollbalken.
   Die umgebende Sektion ist genau so breit wie der sichtbare Bereich und
   schneidet den Überstand nun ab. overflow-x:clip statt hidden, damit
   overflow-y sichtbar bleibt (sonst würde daraus ein Scrollcontainer). */
.section:has(> .wrap > .fields--linie){
  overflow-x:clip;
}

.fields--linie::before{
  content:"";
  position:absolute;
  inset:-40px calc(50% - 50vw);
  z-index:-1;
  background:#faf9f7;
}

/* Senkrechte gelbe Linie am Text statt Strich unter dem Titel.
   Kein border, denn der kann keinen Verlauf - die Linie ist ein 3px
   schmaler Hintergrund, der nach unten auf null ausläuft.
   rgba statt "transparent": manche Browser blenden sonst über
   durchsichtiges Schwarz ab, was die Linie grau werden lässt. */
.fields--linie .field-body{
  padding-left:25px;
  background-image:linear-gradient(
      180deg,
      var(--yellow) 0%,
      var(--yellow) 38%,
      rgba(245,179,27,0) 100%);
  background-size:3px 100%;
  background-repeat:no-repeat;
  background-position:left top;
}
.fields--linie .field-rule{display:none;}
.fields--linie .field-num{margin-bottom:7px;}
.fields--linie .field-title{margin-bottom:15px;}
.fields--linie .field-text{margin-bottom:20px;}

/* beschrifteter Hinweis mit gelbem Pfeil */
.fields--linie .field-more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.3px;
  color:var(--black);
}
.fields--linie .field-more::after{
  font-size:20px;
  color:var(--yellow);
}

/* etwas Tiefe unter den Bildern - bewusst ohne runde Ecken,
   Bilder haben auf der ganzen Seite gerade Kanten */
.fields--linie .field-img{
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

/* --- Galerie mit Bildstrecken --- */
.work{
  padding:56px 0 62px;
  border-top:1px solid #1c1c1c;
}
.work:first-of-type{border-top:0;}

.work-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:46px;
  margin-bottom:30px;
}

.work-eyebrow{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3.2px;
  text-transform:uppercase;
  color:#b4b4b4;
}
.work-title{
  margin:0;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.08;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--white);
}
/* der Bereichsname im Titel steht in Gelb */
.work-title em{
  font-style:normal;
  color:var(--yellow);
}
.work-rule{
  display:block;
  width:34px;
  height:4px;
  margin:16px 0 14px;
  background:var(--yellow);
}
.work-lead{
  max-width:48ch;
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:#cfcfcf;
}

/* Balken zum Blättern */
.dots{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  margin-bottom:6px;
}
.dot{
  width:26px;
  height:4px;
  padding:0;
  border:0;
  background:#5a5a5a;
  cursor:pointer;
  transition:background .22s, transform .22s;
}
.dot:hover{background:#8a8a8a;}
.dot.is-active{background:var(--yellow);}
.dot:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;}

/* Pfeile links und rechts der Balken: feine Rahmen auf Schwarz,
   beim Überfahren gelb gefüllt wie die Pfeile der Referenzen. */
.work-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:16px;
}
.work-nav .dots{margin-bottom:0;}
.work-arrow{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #3c3c3c;
  background:transparent;
  color:var(--white);
  cursor:pointer;
  transition:background .22s, border-color .22s, color .22s;
}
.work-arrow svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:square;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.work-arrow:hover{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--black);
  transform:none;
}
.work-arrow.slider-prev:hover svg{transform:translateX(-2px);}
.work-arrow.slider-next:hover svg{transform:translateX(2px);}
.work-arrow:active svg{transform:none;}
.work-arrow:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}

.slider{overflow:hidden;}
.slider-track{
  display:flex;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.slide{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:1.85fr 1fr;
  gap:12px;
}

.tile{
  position:relative;
  overflow:hidden;
  margin:0;
  aspect-ratio:4 / 3;
  background:#141414;
}
/* das grosse Bild füllt beide Zeilen der linken Spalte */
.tile--big{
  grid-row:span 2;
  aspect-ratio:auto;
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.tile:hover img{transform:scale(1.05);}

/* Bildbeschreibung (optional): Balken unten über dem Foto.
   Einfach <figcaption class="tile-caption"> in die figure setzen.
   pointer-events:none, damit der Klick trotzdem die Lightbox öffnet. */
.tile-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  margin:0;
  padding:11px 16px 10px;
  font-size:14px;
  line-height:1.45;
  color:var(--white);
  background:rgba(0,0,0,.55);
  pointer-events:none;
}
.tile--big .tile-caption{padding:14px 20px 13px;font-size:15px;}

/* =====================================================
   THEMENBLÖCKE - ausführliche Leistungsseite (z. B. SEO / GEO)
   Der Text führt, Fotos und kleine HTML-Schaubilder stützen ihn.
   Wichtig: .reveal-Elemente bekommen hier KEIN eigenes transition -
   das würde die Einblendung überschreiben. Hover-Effekte laufen
   deshalb über Kindelemente und Pseudo-Elemente.
   ===================================================== */

.topic{padding:92px 0 96px;}
.topic--dark {background:var(--black);color:var(--white);}
.topic--light{background:var(--white);color:var(--black);}
.topic--warm {background:#f5f3ee;color:var(--black);}

/* --- Kopf: Nummer, Titel, Balken, Vorspann --- */
.topic-eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#9a9a9a;
}
.topic--light .topic-eyebrow,
.topic--warm .topic-eyebrow{color:#6e6e6e;}
.topic-num{
  padding:5px 7px 3px;
  font-family:var(--font-cond);
  font-size:15px;
  font-weight:900;
  line-height:1;
  letter-spacing:.5px;
  color:var(--black);
  background:var(--yellow);
}
.topic-title{
  margin:0;
  font-family:var(--font-cond);
  font-weight:900;
  font-size:clamp(32px, 3.5vw, 48px);
  line-height:1.02;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.topic-title em{font-style:normal;color:var(--yellow);}
/* Gelb auf Weiss wäre zu schwach - dort wird das Wort gelb unterlegt */
.topic--light .topic-title em,
.topic--warm .topic-title em{
  color:inherit;
  background:linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 90%, transparent 90%);
}
.topic-rule{
  display:block;
  width:34px;
  height:4px;
  margin:22px 0;
  background:var(--yellow);
}
.topic-lead{
  max-width:54ch;
  margin:0 0 16px;
  font-size:19px;
  line-height:1.6;
  color:#ececec;
}
.topic-text{
  max-width:60ch;
  margin:0;
  font-size:16px;
  line-height:1.72;
  color:#a8a8a8;
}
.topic--light .topic-lead,
.topic--warm .topic-lead{color:#1a1a1a;}
.topic--light .topic-text,
.topic--warm .topic-text{color:var(--grey-text);}

/* --- Aufteilungen --- */
.topic-intro{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:72px;
  align-items:center;
}
.topic-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:78px;
  align-items:center;
}

/* Foto mit gelben Sucher-Winkeln - dieselbe Geste wie die Seitentitel */
.topic-figure{position:relative;margin:0;}
.topic-figure img{
  width:100%;
  height:auto;              /* sonst gewinnt das height-Attribut gegen aspect-ratio */
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.topic-figure::before,
.topic-figure::after{
  content:"";
  position:absolute;
  z-index:2;
  width:58px;
  height:58px;
  border:0 solid var(--yellow);
  pointer-events:none;
}
.topic-figure::before{top:-12px;left:-12px;border-top-width:5px;border-left-width:5px;}
.topic-figure::after{bottom:-12px;right:-12px;border-bottom-width:5px;border-right-width:5px;}

/* --- 01 Messwerte-Tafel (Core Web Vitals) --- */
.vitals{
  position:relative;
  padding:32px 34px 28px;
  background:#0d0d0d;
  border:1px solid #232323;
}
.vitals::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  width:56px;
  height:4px;
  background:var(--yellow);
}
.vitals-label{
  margin:0 0 24px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:#9a9a9a;
}
.vital + .vital{margin-top:22px;padding-top:22px;border-top:1px solid #1f1f1f;}
.vital-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
.vital-key{
  font-family:var(--font-cond);
  font-size:28px;
  font-weight:900;
  line-height:1;
  letter-spacing:.6px;
}
.vital-val{font-size:15px;font-weight:700;color:var(--yellow);}
.vital-scale,
.vital-legend{
  display:grid;
  grid-template-columns:var(--cols);
  gap:3px;
}
.vital-scale{height:6px;}
.vital-scale span{background:#2a2a2a;}
.vital-scale span:nth-child(2){background:#474747;}
/* der «gute» Bereich füllt sich beim Einblenden von links */
.vital-scale span:first-child{
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .45s;
}
.vitals.is-visible .vital-scale span:first-child{transform:none;}
.vital-legend{
  margin-top:7px;
  font-size:11px;
  letter-spacing:.4px;
  color:#767676;
}
.vital-text{margin:10px 0 0;font-size:14px;line-height:1.5;color:#a8a8a8;}
.vitals-foot{margin:24px 0 0;font-size:13px;font-style:italic;color:#7c7c7c;}

/* --- 01 Karten --- */
.topic-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:80px;
}
.tcard{
  position:relative;
  padding:34px 30px 30px;
  background:#0b0b0b;
  border:1px solid #1f1f1f;
}
/* gelbe Kante wächst beim Überfahren über die ganze Breite */
.tcard::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  width:40px;
  height:3px;
  background:var(--yellow);
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.tcard:hover::before{width:calc(100% + 2px);}
.tcard-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:24px;
  border:1px solid #333;
  color:var(--yellow);
  transition:background .35s ease, border-color .35s ease, color .35s ease;
}
.tcard-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tcard:hover .tcard-icon{background:var(--yellow);border-color:var(--yellow);color:var(--black);}
.tcard-title{
  margin:0 0 12px;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  color:var(--white);
}
.tcard p{margin:0 0 22px;font-size:15px;line-height:1.65;color:#a8a8a8;}
.tcard-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.tcard-tags li{
  padding:5px 9px 3px;
  font-size:12px;
  letter-spacing:.3px;
  color:#cfcfcf;
  border:1px solid #2e2e2e;
}

/* --- 02 Suchintentionen --- */
.intents{margin-top:34px;}
.intents-label{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:#6e6e6e;
}
.intents ul{margin:0;padding:0;list-style:none;}
.intents li{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:16px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #e6e3dc;
}
.intent-type{
  font-family:var(--font-cond);
  font-size:17px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
}
/* Suchanfrage im Look eines Suchfelds */
.intent-query{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  padding:8px 16px 7px 12px;
  font-size:15px;
  color:#2a2a2a;
  background:#f5f3ee;
  border-radius:999px;
}
.intent-query::before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 02 Drei Spalten --- */
.topic-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:96px;
}
.tcol{
  padding-top:26px;
  border-top:1px solid #dedad2;
  background:linear-gradient(var(--yellow), var(--yellow)) 0 -1px / 44px 4px no-repeat;
}
.tcol-title{
  margin:0 0 12px;
  font-family:var(--font-cond);
  font-size:25px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
}
.tcol p{margin:0;font-size:15px;line-height:1.7;color:var(--grey-text);}

/* --- 03 Checkliste --- */
.checks{margin:34px 0 0;padding:0;list-style:none;}
.checks li{
  position:relative;
  padding:17px 0 17px 46px;
  border-bottom:1px solid #1f1f1f;
}
.checks li:first-child{border-top:1px solid #1f1f1f;}
.checks li::before{
  content:"";
  position:absolute;
  top:18px;
  left:0;
  width:26px;
  height:26px;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.checks strong{
  display:block;
  margin-bottom:4px;
  font-size:17px;
  font-weight:700;
  color:var(--white);
}
.checks span{display:block;font-size:15px;line-height:1.6;color:#a8a8a8;}

/* --- 03 Kartenergebnis über dem Foto --- */
.localcard{
  position:absolute;
  z-index:3;
  left:-40px;
  bottom:48px;
  width:min(292px, 84%);
  padding:18px 20px 0;
  color:var(--black);
  background:var(--white);
  box-shadow:0 26px 54px rgba(0,0,0,.5);
}
.localcard p{margin:0;}
.localcard-kicker{
  margin-bottom:8px !important;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#8a8a8a;
}
.localcard-name{font-size:19px;font-weight:700;line-height:1.2;}
.localcard-rating{margin-top:4px !important;font-size:14px;font-weight:700;}
.localcard-stars{color:var(--yellow);letter-spacing:1px;}
.localcard-count{font-weight:400;color:#777;}
.localcard-meta{margin-top:2px !important;font-size:13px;color:#555;}
.localcard-meta b{color:#1f8a4c;font-weight:600;}
.localcard-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:14px -20px 0;
  border-top:1px solid #ecebe7;
}
.localcard-actions span{
  padding:10px 0 9px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  text-align:center;
  text-transform:uppercase;
}
.localcard-actions span + span{border-left:1px solid #ecebe7;}

/* pulsierende Stecknadel oben rechts im Foto */
.localpin{
  position:absolute;
  z-index:3;
  top:22%;
  right:24%;
  width:18px;
  height:18px;
  border:3px solid var(--black);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.localpin::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid var(--yellow);
  animation:pinPulse 2.2s ease-out infinite;
}
@keyframes pinPulse{
  from{transform:scale(1);opacity:.9;}
  to  {transform:scale(3.2);opacity:0;}
}

/* --- 04 Beispiel einer KI-Antwort --- */
.aichat{
  margin:0;
  background:var(--white);
  border:1px solid #e4e0d7;
  box-shadow:0 30px 60px rgba(0,0,0,.09);
}
.aichat-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:13px 18px;
  border-bottom:1px solid #eeebe4;
}
.aichat-bar i{width:9px;height:9px;border-radius:50%;background:#dcd8cf;}
.aichat-bar b{
  margin-left:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#8a8a8a;
}
.aichat-body{padding:26px 26px 24px;}
.aichat-q{
  width:fit-content;
  max-width:86%;
  margin:0 0 20px auto;
  padding:12px 16px;
  font-size:15px;
  line-height:1.5;
  color:var(--black);
  background:#f2efe7;
  border-radius:16px 16px 3px 16px;
}
.aichat-a{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
}
.aichat-avatar{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--black);
  color:var(--yellow);
}
.aichat-avatar svg{width:16px;height:16px;fill:currentColor;}
.aichat-a p{margin:4px 0 16px;font-size:15px;line-height:1.68;color:#2a2a2a;}
.aichat-a mark{
  padding:0 2px;
  font-weight:700;
  color:inherit;
  background:linear-gradient(transparent 55%, rgba(245,179,27,.6) 55%);
}
.aichat-src{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.aichat-src li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 11px 4px 4px;
  font-size:12px;
  color:#555;
  background:#f5f3ee;
  border-radius:999px;
}
.aichat-src b{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:10px;
  border-radius:50%;
  color:var(--black);
  background:var(--yellow);
}
.aichat figcaption{
  padding:11px 26px 13px;
  font-size:12px;
  font-style:italic;
  color:#9a9a9a;
  border-top:1px solid #eeebe4;
}

/* --- 04 Vier Schritte --- */
.geo-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  margin:96px 0 0;
  padding:0;
  list-style:none;
}
.geo-step-num{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  font-family:var(--font-cond);
  font-size:46px;
  font-weight:900;
  line-height:1;
  color:var(--black);
}
/* Linie verbindet die Schritte zu einer Abfolge */
.geo-step-num::after{
  content:"";
  flex:1;
  height:2px;
  background:linear-gradient(90deg, var(--yellow) 0 36px, #d9d5cc 36px);
}
.geo-step h3{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.3;color:var(--black);}
.geo-step p{margin:0;font-size:15px;line-height:1.68;color:var(--grey-text);}

/* =====================================================
   3D & ANIMATION - "Was ist 3D" und Vorher/Nachher
   Baut auf den Themenblöcken oben auf (topic-*).
   ===================================================== */

/* direkt unter der weissen Einleitung: Trennlinie statt Farbwechsel,
   weil das Uhrenbild selbst auf Weiss steht */
.topic.what3d{padding-top:0;}
.what3d-inner{padding-top:88px;border-top:1px solid #ebe8e1;}

/* Bild ungeschnitten zeigen (Freisteller) - überschreibt das 4:5-Format */
.topic-figure.topic-figure--free img{
  aspect-ratio:auto;
  height:auto;
  object-fit:contain;
}

/* nummerierte Arbeitsschritte */
.steps3d{margin:32px 0 0;padding:0;list-style:none;}
.steps3d li{
  display:grid;
  grid-template-columns:52px 1fr;
  column-gap:18px;
  padding:18px 0;
  border-top:1px solid #e3dfd6;
}
.steps3d li:last-child{border-bottom:1px solid #e3dfd6;}
.steps3d-num{
  grid-row:span 2;
  align-self:start;
  padding-bottom:6px;
  font-family:var(--font-cond);
  font-size:30px;
  font-weight:900;
  line-height:1;
  color:var(--black);
  background:linear-gradient(var(--yellow), var(--yellow)) 0 100% / 26px 4px no-repeat;
}
.steps3d h3{margin:2px 0 4px;font-size:17px;font-weight:700;line-height:1.3;color:var(--black);}
.steps3d p{margin:0;font-size:15px;line-height:1.6;color:var(--grey-text);}

/* --- Vergleichsregler --- */
.compare-head .topic-lead{max-width:62ch;}
.compare{
  --pos:50%;
  position:relative;
  margin-top:50px;
  overflow:hidden;
  aspect-ratio:813 / 412;
  background:#1a1a1a;
  box-shadow:0 34px 70px rgba(0,0,0,.18);
  user-select:none;
}
/* Jede Stufe liegt in einer eigenen Ebene. Abgeschnitten wird die Ebene,
   nicht das Bild - so stimmt die Schnittkante mit dem Regler überein,
   auch wenn das Bild breiter ist als der Rahmen. */
.compare-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 0);        /* Ausgangswert, damit der Wechsel animierbar ist */
}
.compare-layer img{
  position:absolute;
  max-width:none;
}

/* --- Drei Stufen desselben Raums ---
   Gemessen am Drahtgitter (1511 x 641 px): Die Renderings decken sich
   damit bei gleicher Breite und 145 px Versatz nach oben; unten fehlen
   ihnen 14 px. Sichtbar ist deshalb nur der gemeinsame Bereich
   1511 x 627 px. Alle Werte beziehen sich auf dessen Höhe, so bleibt die
   Deckung bei jedem Seitenverhältnis erhalten (mobil wird seitlich
   beschnitten, mittig). */
.compare--stages{aspect-ratio:1511 / 627;}
.compare--stages img{
  left:50%;
  width:auto;
  transform:translateX(-50%);
}
.stage-wire img{top:0;height:102.23%;}                 /* 641 / 627 */
.stage-ruin img,
.stage-loft img{top:-23.13%;height:123.08%;}           /* -145 / 627, 771.7 / 627 */

/* welche Stufe links (abgeschnitten) und welche rechts liegt */
.compare[data-mode="modell"] .stage-wire,
.compare[data-mode="umbau"] .stage-ruin{
  z-index:1;
  clip-path:inset(0 calc(100% - var(--pos)) 0 0);
}
.compare[data-mode="modell"] .stage-loft,
.compare[data-mode="umbau"] .stage-wire{opacity:0;}

/* Beim Umschalten wischt die neue Kante herein statt zu springen.
   Nur kurz aktiv - beim Ziehen am Regler darf nichts nachlaufen. */
.compare.is-switching .compare-layer{
  transition:clip-path .7s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
}
/* das Loft muss schon da sein, wenn die Ruine zur Seite wischt -
   und darf beim Zurückwechseln erst verschwinden, wenn sie es verdeckt */
.compare[data-mode="umbau"].is-switching .stage-loft{transition:none;}
.compare[data-mode="modell"].is-switching .stage-loft{transition:opacity 0s .7s;}
.compare-line{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos);
  z-index:2;
  width:3px;
  margin-left:-1.5px;
  background:var(--yellow);
  box-shadow:0 0 18px rgba(0,0,0,.35);
  pointer-events:none;
}
.compare-knob{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  background:var(--yellow);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transform:translate(-50%, -50%);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.compare-knob svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:var(--black);
  stroke-width:2.4;
  stroke-linecap:square;
}
.compare:hover .compare-knob{transform:translate(-50%, -50%) scale(1.08);}
.compare-range:focus-visible ~ .compare-line .compare-knob,
.compare:focus-within .compare-knob{outline:3px solid var(--white);outline-offset:3px;}
.compare-tag{
  position:absolute;
  top:20px;
  z-index:2;
  padding:7px 13px 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  pointer-events:none;
}
.compare-tag--before{left:20px;color:var(--white);background:rgba(0,0,0,.72);}
.compare-tag--after{right:20px;color:var(--black);background:var(--yellow);}
/* unsichtbares Bedienfeld über der ganzen Fläche */
.compare-range{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none;
  appearance:none;
}

/* Umschalter über dem Regler */
.compare-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:40px;
}
.compare-tab{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 20px 11px 12px;
  border:1px solid #d9d4c9;
  background:transparent;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--black);
  cursor:pointer;
  transition:background .25s, border-color .25s, color .25s;
}
.compare-tab-num{
  padding:4px 6px 2px;
  font-family:var(--font-cond);
  font-size:14px;
  font-weight:900;
  line-height:1;
  letter-spacing:.4px;
  color:var(--black);
  background:#e6e1d6;
  transition:background .25s;
}
.compare-tab:hover{border-color:var(--black);}
.compare-tab.is-active{
  color:var(--white);
  background:var(--black);
  border-color:var(--black);
}
.compare-tab.is-active .compare-tab-num{background:var(--yellow);}
.compare-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.compare-tabs + .compare{margin-top:18px;}

/* darunter: die drei Stufen als Schritte */
.geo-steps--3{grid-template-columns:repeat(3,1fr);margin-top:64px;}

/* =====================================================
   PILLARS - die vier Leistungsfelder
   ===================================================== */

.section--pillars{padding:64px 0 68px;}

.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  margin:0 0 46px;
}

.pillar{margin:0;}

/* Die Freisteller haben einen weissen Hintergrund und gehen deshalb
   nahtlos in die Seite über - kein Rahmen, keine Kante. */
.pillar-img{
  margin-bottom:22px;
  overflow:hidden;
}
.pillar-img img{
  width:100%;
  height:auto;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.pillar:hover .pillar-img img{transform:scale(1.05);}

/* Gelbe eckige Klammern - das Motiv der Sektion.
   Der Träger setzt --parm/--pthick und braucht position:relative sowie
   ein horizontales Padding von mindestens --parm. */
.pb{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--parm);
  border:0 solid var(--yellow);
  border-top-width:var(--pthick);
  border-bottom-width:var(--pthick);
  transition:border-color .25s;
}
.pb-left {left:0; border-left-width:var(--pthick);}
.pb-right{right:0;border-right-width:var(--pthick);}

/* Titel in gelben eckigen Klammern */
.pillar-title{
  --parm:9px;     /* Länge der waagrechten Klammerarme */
  --pthick:4px;   /* Strichstärke */
  position:relative;
  display:inline-block;
  margin:0 0 16px;
  padding:6px calc(var(--parm) + 5px);
  font-family:var(--font-cond);
  font-weight:900;
  font-size:23px;
  line-height:1.15;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--black);
  transition:background .22s;
}
/* ::after zieht die Klickfläche über den ganzen Klammerblock -
   sonst wären nur die Buchstaben anklickbar */
.pillar-title a::after{
  content:"";
  position:absolute;
  inset:0;
}
.pillar-title:hover{background:var(--yellow);}
.pillar-title a:focus-visible{outline:2px solid var(--black);outline-offset:5px;}

/* min-height = zwei Zeilen: so starten die Stichwortlisten aller Spalten
   auf derselben Höhe, auch wenn ein Text nur eine Zeile braucht */
.pillar-text{
  margin:0 0 20px;
  min-height:3.1em;
  font-size:15.5px;
  line-height:1.55;
  color:var(--grey-text);
}

/* Stichworte - gesperrte Versalien, eines pro Zeile */
.pillar-tags{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.72;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:#6b6b6b;
}
/* jede Leistung ist verlinkt - gelber Strich fährt beim Überfahren ein,
   dasselbe Verhalten wie bei den Einträgen im Mega-Menü */
.pillar-tags a{
  position:relative;
  display:inline-block;
  transition:color .2s, padding-left .24s cubic-bezier(.2,.7,.2,1);
}
.pillar-tags a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:3px;
  margin-top:-1px;
  background:var(--yellow);
  transition:width .24s cubic-bezier(.2,.7,.2,1);
}
.pillar-tags a:hover,
.pillar-tags a:focus-visible{
  color:var(--black);
  padding-left:24px;
}
.pillar-tags a:hover::before,
.pillar-tags a:focus-visible::before{width:16px;}
.pillar-tags a:focus-visible{outline:2px solid var(--yellow);outline-offset:2px;}

/* CTA - der normale gelbe Button, nur linksbündig auf der Achse
   von Vorspann und Headline statt zentriert */
.pillars-cta{margin:0;}

/* =====================================================
   PROJEKTE
   ===================================================== */

.projects{
  --project-h:420px;        /* feste Boxhöhe - alle Spalten identisch */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:stretch;
}

/* jede Box exakt gleich hoch, unabhängig von Textlänge und Reihenfolge */
.project{
  margin:0;
  height:var(--project-h);
  display:flex;
  flex-direction:column;
}

.project-text{
  flex:0 0 auto;            /* Textblock so hoch wie nötig */
  background:var(--yellow);
  color:var(--black);
  padding:14px 16px 18px;
}
.project-text h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.project-text p{
  margin:0;
  font-size:15px;
  line-height:1.45;
}

/* Bild füllt den Rest der Box - gleicht unterschiedliche Textlängen aus */
.project-img{
  position:relative;
  overflow:hidden;
  flex:1 1 auto;
  min-height:0;
  background:#ddd center/cover no-repeat;
}
/* Zoom über eine eigene Ebene mit transform: background-size lässt sich
   von "cover" aus nicht überblenden und würde springen. Die Ebene erbt
   das Bild aus den data-img-Regeln unten. */
.project-img::before{
  content:"";
  position:absolute;
  inset:0;
  background:inherit;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.project:hover .project-img::before{transform:scale(1.05);}
.project-text{transition:background .3s ease;}
.project:hover .project-text{background:#ffc844;}

/* Platzhalterfotos von picsum.photos - /seed/… liefert bei jedem Aufruf
   dasselbe Bild, sonst würde bei jedem Reload ein anderes erscheinen.
   Vor dem Livegang durch die echten Projektbilder ersetzen. */
.project-img[data-img="spirit"]{
  background-image:url("https://picsum.photos/seed/bd-spirit/600/800");
}
.project-img[data-img="dyhrberg"]{
  background-image:url("https://picsum.photos/seed/bd-dyhrberg/600/900");
}
.project-img[data-img="vhs"]{
  background-image:url("https://picsum.photos/seed/bd-vhs/600/800");
}

/* =====================================================
   TESTIMONIALS
   ===================================================== */

.testimonials{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:34px;
}

.testimonial{margin:0;}

/* Padding entfernt: die Winkel sitzen dadurch auf der Bildkante,
   nicht daneben - und liegen per z-index über dem Foto */
.portrait{
  position:relative;
  aspect-ratio:1 / 1;      /* Quadrat erzwungen */
  margin-bottom:14px;
}
.portrait img{
  width:100%;
  height:100%;
  object-fit:cover;        /* füllt das Quadrat, egal welches Quellformat */
  object-position:center;
  filter:grayscale(100%);
  transition:filter .45s ease, transform .45s ease;
}
/* beim Überfahren bekommt das Portrait Farbe */
.testimonial:hover .portrait img{
  filter:grayscale(0%);
  transform:scale(1.03);
}
/* doppelte Strichstärke, über dem Foto */
.portrait .corner{
  width:30px;
  height:30px;
  z-index:2;
}
.portrait .corner.tl{border-top-width:8px;border-left-width:8px;}
.portrait .corner.tr{border-top-width:8px;border-right-width:8px;}
.portrait .corner.bl{border-bottom-width:8px;border-left-width:8px;}
.portrait .corner.br{border-bottom-width:8px;border-right-width:8px;}

.t-name{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--black);
}
.t-firm{
  margin:2px 0 10px;
  font-size:13px;
  font-weight:700;
  color:#9b9b9b;
  text-align:right;
}

.testimonial blockquote{
  margin:0;
  font-size:15px;
  line-height:1.45;
  font-style:italic;
  color:var(--grey-text);
}
.testimonial blockquote::before{content:"\00AB";color:var(--yellow);font-style:normal;}
.testimonial blockquote::after{content:"\00BB";color:var(--yellow);font-style:normal;}

/* abwechselnde Ausrichtung wie im Layout */
.testimonial:nth-child(even) .t-name{text-align:left;}
.testimonial:nth-child(odd)  .t-name{text-align:left;}
.testimonial:nth-child(4) .t-name,
.testimonial:nth-child(4) .t-firm{text-align:right;}

/* =====================================================
   KUNDENLISTE
   ===================================================== */

.clientlist{
  margin:34px 0 0;
  font-family:var(--font-cond);
  font-size:38px;
  line-height:1.05;      /* etwas enger als die ursprünglichen 1.22 */
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:justify;
  word-spacing:7px;         /* Abstand zwischen den Kundennamen */
}

/* Farbwechsel: jeder 2. Kunde heller */
.clientlist span{color:#4f4f4f;}
.clientlist span:nth-child(even){color:#8c8c8c;}

/* =====================================================
   FOOTER
   Fünf gleich breite Spalten, gelber Grund, alles in Schwarz.
   ===================================================== */

.footer{
  background:var(--yellow);
  color:var(--black);
  padding:58px 0 0;
}

.footer-grid{
  display:grid;
  /* Die Kontaktspalte trägt die längsten Zeilen (Adresse) und
     bekommt deshalb mehr Breite als die übrigen vier. */
  grid-template-columns:1fr 1.45fr 1fr 1fr 1fr;
  gap:36px 30px;
  padding-bottom:52px;
}

/* --- Spaltenüberschrift mit kurzem Strich darunter --- */
.f-head{
  margin:0 0 26px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--black);
}
.f-head::after{
  content:"";
  display:block;
  width:30px;
  height:3px;
  margin-top:14px;
  background:var(--black);
}

/* --- Spalte 1: Claim und Social ---
   Ohne Logo trägt der Claim die Spalte und steht deshalb etwas grösser. */
.f-claim{
  margin:0 0 22px !important;
  font-weight:900;
  font-size:30px !important;
  line-height:1.14 !important;
  letter-spacing:-.3px;
  text-transform:uppercase;
  color:var(--black);
}

.f-rule{
  display:block;
  width:44px;
  height:4px;
  margin-bottom:26px;
  background:var(--black);
}

.f-social{
  display:flex;
  gap:12px;
  list-style:none;
  margin:0;
  padding:0;
}
.f-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1.5px solid var(--black);
  border-radius:50%;
  transition:background .22s, color .22s;
}
.f-social svg{
  width:19px;
  height:19px;
  fill:currentColor;
}
.f-social a:hover,
.f-social a:focus-visible{
  background:var(--black);
  color:var(--yellow);
}

/* --- Spalte 2: Kontakt mit Symbolen --- */
.f-contact{
  list-style:none;
  margin:0;
  padding:0;
}
.f-contact li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
  font-size:15px;
  line-height:1.5;
}
.f-contact li:last-child{margin-bottom:0;}
/* feste Breite, damit alle Textspalten bündig starten */
.f-contact svg{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:1px;
  fill:var(--black);
}

/* --- Spalten 3 und 4: Linklisten --- */
.f-links{
  list-style:none;
  margin:0;
  padding:0;
}
.f-links li{margin-bottom:11px;}
.f-links li:last-child{margin-bottom:0;}
.f-links a{
  display:inline-block;
  font-size:16px;
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.f-links a:hover,
.f-contact a:hover{text-decoration:underline;text-underline-offset:3px;}
.f-links a:hover{transform:translateX(3px);}

.footer a:focus-visible{outline:2px solid var(--black);outline-offset:3px;}

/* --- Spalte 5: Konzern und Netzwerk ---
   Die Originaldateien liegen unverändert in images/. Das Grau von ENERGY
   und das Violett von asw wirken auf Gelb kraftlos, deshalb laufen beide
   über brightness(0) einfarbig schwarz - das passt zum übrigen Footer und
   gibt den zwei Zeichen dasselbe Gewicht.
   Originalfarben zurück: die filter-Zeile entfernen. */
.f-partner{
  display:block;
  height:auto;
  filter:brightness(0);
}
.f-partner--energy{
  width:168px;
  margin-bottom:22px;
}
.f-partner--asw{
  width:190px;
}

/* --- Fusszeile --- */
.footer-bottom{
  border-top:1px solid rgba(0,0,0,.55);
  padding:18px 0 22px;
}
.footer-bottom p{
  margin:0;
  font-size:14px;
  color:var(--black);
}
.footer-bottom .sep{
  margin:0 12px;
  opacity:.5;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:1100px){
  .mega--produkte .mega-inner{grid-template-columns:repeat(3,1fr);}
  /* zwei Spalten - die Freisteller brauchen Breite, um zu wirken */
  .pillars{grid-template-columns:repeat(2,1fr);gap:30px 34px;}
  .offer-grid.offer-grid--four{grid-template-columns:repeat(2,1fr);}
  /* Einleitung untereinander, das Bild führt */
  .catintro-grid{grid-template-columns:1fr;gap:34px;}
  .catintro-img{order:-1;max-width:620px;}
  .pagehead-inner{gap:48px;}
  .pagehead-logo{--logo-w:200px;}
  .mainnav--inline > ul{gap:clamp(16px, 2.6vw, 48px);}
  /* Footer: die beiden schmalen Listenspalten rücken zusammen */
  /* ab hier wieder gleichmässig - die Adresse hat dann genug Platz */
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:40px 30px;}
  .areas{gap:20px;}
  .ref-chips{gap:10px;}
  .team{grid-template-columns:repeat(4,1fr);}
  .network-grid{gap:38px;}
  .contact-grid{gap:44px;}
  .check-grid{gap:40px;}
  .topic-intro{gap:48px;}
  .topic-split{gap:56px;}
  .localcard{left:-22px;}
}

@media (max-width:900px){
  .hero-title{font-size:68px;}
  .projects{grid-template-columns:1fr;}
  .testimonials{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .clientlist{font-size:28px;}
  .section--pillars{padding:48px 0 54px;}
  .pillar-title{font-size:19px;}
  .mega-inner{grid-template-columns:repeat(2,1fr);gap:28px 30px;padding:30px 20px 34px;}
  .mega--produkte .mega-inner{grid-template-columns:repeat(2,1fr);}
  .pagehead-inner{padding:30px 20px 26px;gap:34px;}
  .pagehead-logo{--logo-w:190px;}
  /* geschrumpft einzeilig halten: Logo und Menüpunkte rücken zusammen */
  .pagehead.is-compact .pagehead-inner{gap:18px;padding-left:16px;padding-right:16px;}
  .pagehead.is-compact .mainnav--inline > ul{gap:10px;}
  .pagehead.is-compact .mainnav--inline > ul > li > a,
  .pagehead.is-compact .mainnav--inline .mega-trigger{letter-spacing:.3px;}
  .mainnav > ul{gap:clamp(18px, 3.4vw, 58px);}
  /* sechs Menüpunkte neben dem Logo: bis Tablet-Breite einzeilig halten */
  .mainnav--inline > ul{gap:clamp(14px, 2.2vw, 34px);}
  .mainnav--inline > ul > li > a,
  .mainnav--inline .mega-trigger{font-size:13px;letter-spacing:.6px;}
  .catintro{padding:48px 0 46px;}
  .catlead{font-size:20px;}
  .offers{padding:46px 0 54px;}
  .offer{padding:26px 24px 24px;}
  .offer-grid{gap:18px;}
  .footer{padding-top:44px;}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:34px 28px;padding-bottom:40px;}
  .f-claim{font-size:26px !important;}
  /* Bereiche zweispaltig, die Galerie bleibt dreispaltig */
  .areas{grid-template-columns:repeat(2,1fr);gap:26px 24px;}
  .headline-bracket{font-size:25px;--barm:14px;--bthick:6px;padding:12px 20px;}
  .leistung-intro{padding:46px 0 44px;}
  .gallery-block{padding:42px 0 46px;}
  /* Bereiche untereinander, Text und Bild bleiben nebeneinander */
  .fields{grid-template-columns:1fr;gap:34px;}
  .work{padding:44px 0 48px;}
  .work-head{flex-direction:column;align-items:flex-start;gap:22px;}
  .dots{margin-bottom:0;}
  .work-arrow{width:40px;height:40px;}
  .ref-chips{grid-template-columns:repeat(3,1fr);}
  .ref-stage{gap:10px;}
  .slider-arrow{width:46px;height:46px;font-size:34px;}
  .principles{grid-template-columns:1fr;gap:30px;}
  .team{grid-template-columns:repeat(3,1fr);}
  .usp{grid-template-columns:repeat(2,1fr);gap:22px;}
  .network-grid{grid-template-columns:1fr;gap:28px;}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
  .check-grid{grid-template-columns:1fr;gap:34px;}
  .check{padding:46px 0 50px;}
  /* Themenblöcke untereinander, Karten und Schritte zweispaltig */
  .topic{padding:64px 0 70px;}
  .topic-intro,
  .topic-split{grid-template-columns:1fr;gap:46px;}
  .topic-figure{max-width:560px;}
  .topic-figure img{aspect-ratio:4 / 3;}
  .topic-cards{grid-template-columns:repeat(2,1fr);margin-top:56px;}
  .topic-cols{grid-template-columns:1fr;gap:34px;margin-top:64px;}
  .geo-steps{grid-template-columns:repeat(2,1fr);gap:40px 30px;margin-top:64px;}
  .localcard{left:16px;bottom:16px;}
  .what3d-inner{padding-top:60px;}
  .compare--stages{aspect-ratio:2 / 1;}
}

@media (max-width:600px){
  .hero,.hero-inner{min-height:480px;}
  .hero-title{font-size:48px;}
  .hero-logo{width:152px;bottom:24px;}
  /* unten rechts würde der Button hier das Logo überlappen -
     deshalb läuft er auf Mobile direkt unter der Headline mit */
  .hero-cta{position:static;margin-top:26px;}
  .hero-frame{display:none;}   /* Bild ist hier zu stark beschnitten */
  .mainnav > ul{gap:18px;height:auto;padding:10px 12px;flex-wrap:wrap;}
  /* einspaltig und scrollbar, damit das Panel nie über den
     Bildschirm hinausläuft; die Beschreibungen entfallen */
  .mega{max-height:calc(100vh - 130px);overflow-y:auto;}
  .mega-inner{grid-template-columns:1fr;gap:22px;padding:24px 20px 28px;}
  .mega--produkte .mega-inner{grid-template-columns:1fr;}
  .mega-lead{display:none;}
  .mega--produkte .mega-lead{display:block;}
  /* Kopf umbrechen: Logo oben, Navigation darunter */
  .pagehead-inner{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px 6px;}
  .pagehead-logo{--logo-w:168px;}
  .mainnav--inline{padding-bottom:0;}
  .mainnav--inline > ul{gap:14px 20px;}
  /* geschrumpft: kleines Zeichen links, Navigation zweizeilig daneben */
  .pagehead.is-compact .pagehead-inner{flex-direction:row;gap:18px;padding:10px 16px;}
  .pagehead.is-compact .pagehead-logo{width:58px;height:30px;}
  .pagehead.is-compact .mainnav--inline > ul{gap:2px 14px;padding:0;line-height:22px;}
  .pagehead.is-compact .mainnav--inline > ul > li > a,
  .pagehead.is-compact .mainnav--inline .mega-trigger{font-size:12px;letter-spacing:.4px;}
  .offer-grid,
  .offer-grid.offer-grid--four{grid-template-columns:1fr;}
  .areas{grid-template-columns:1fr;gap:22px;}
  .to-top{right:16px;bottom:16px;width:44px;height:44px;}
  /* nur auf Mobile darf die Überschrift umbrechen */
  .headline-bracket{display:block;white-space:normal;font-size:21px;--barm:12px;--bthick:5px;padding:11px 16px;}
  /* Galerie: grosses Bild über die volle Breite, Rest zweispaltig */
  .gallery{grid-template-columns:repeat(2,1fr);gap:8px;}
  .shot--big{grid-column:span 2;grid-row:span 1;aspect-ratio:4 / 3;}
  /* Bereich: erst das Bild, dann der Text */
  .field{grid-template-columns:1fr;gap:18px;}
  .field-img{order:-1;max-width:360px;}
  .subclaim{font-size:18px;}
  /* Bildstrecke einspaltig */
  .slide{grid-template-columns:1fr;gap:8px;}
  .tile--big{grid-row:span 1;aspect-ratio:4 / 3;}
  .ref-chips{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ref{padding:32px 0 34px;}
  /* Pfeile rücken unter das Bild, damit es die volle Breite bekommt */
  .ref-stage{flex-wrap:wrap;gap:12px;}
  .ref-stage .slider{flex:1 0 100%;order:-1;max-width:none;}
  .team{grid-template-columns:repeat(2,1fr);gap:24px 16px;}
  .usp{grid-template-columns:1fr;gap:18px;}
  .stance{padding:42px 0 46px;}
  .team-section{padding:44px 0 48px;}
  .form-row--two{grid-template-columns:1fr;gap:0;}
  .kontakt-modal-inner{padding:30px 22px 26px;}
  .lb{padding:14px;}
  .lb-inner{gap:8px;}
  .lb-prev,.lb-next{width:42px;height:42px;font-size:30px;}
  .lb-close{top:12px;right:12px;width:40px;height:40px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom p{display:flex;flex-direction:column;gap:2px;}
  .footer-bottom .sep{display:none;}
  /* einspaltig - nebeneinander wären die Freisteller nicht mehr lesbar */
  .pillars{grid-template-columns:1fr;gap:38px;}
  .pillar-img{max-width:420px;margin-bottom:16px;}
  .pillar-text{min-height:0;}
  .eyebrow{gap:14px;letter-spacing:2.6px;}
  .display-title{margin-bottom:34px;}
  .testimonials{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .clientlist{font-size:23px;text-align:left;}
  .topic{padding:52px 0 58px;}
  .topic-lead{font-size:17px;}
  .topic-figure::before,
  .topic-figure::after{width:40px;height:40px;}
  .topic-figure::before{top:-8px;left:-8px;border-top-width:4px;border-left-width:4px;}
  .topic-figure::after{bottom:-8px;right:-8px;border-bottom-width:4px;border-right-width:4px;}
  .topic-figure--local img{aspect-ratio:1 / 1;}
  .vitals{padding:26px 20px 22px;}
  .topic-cards{grid-template-columns:1fr;gap:14px;}
  .tcard{padding:28px 22px 24px;}
  .intents li{grid-template-columns:1fr;gap:6px;}
  .geo-steps{grid-template-columns:1fr;gap:34px;}
  .aichat-body{padding:20px 16px 18px;}
  .aichat figcaption{padding:10px 16px 12px;}
  .what3d-inner{padding-top:46px;}
  .compare--stages{aspect-ratio:3 / 2;}
  .compare-tabs{margin-top:28px;}
  .compare-tab{flex:1 1 auto;padding:10px 14px 9px 10px;font-size:12px;letter-spacing:1px;}
  .compare-tag{top:12px;}
  .compare-tag--before{left:12px;}
  .compare-tag--after{right:12px;}
  .compare-knob{width:46px;height:46px;}
}

/* =====================================================
   FORMULARE: Falle, Fehlermeldung, Bestätigung
   Kam mit der Umstellung auf PHP dazu (Etappe 0).
   ===================================================== */

/* Der Honigtopf. Nicht display:none - das erkennen viele Roboter und
   lassen das Feld dann aus. So steht es im Bild ausserhalb des Fensters,
   ist aber für sie ein ganz normales Feld.
   aria-hidden am Element hält es von der Sprachausgabe fern. */
.formular-falle{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Meldung im Anfragefenster, wenn der Server etwas zurückweist */
.form-fehler{
  margin:0 0 14px;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  color:#c0392b;
}

/* Bestätigung, die an die Stelle des Formulars tritt */
.form-danke{
  padding:10px 0 4px;
}
.form-danke:focus{outline:none;}
.form-danke p{
  margin:0;
  font-size:17px;
  line-height:1.55;
}