/* ==========================================================================
   Nunito Sans - selbst gehostet (variabel: Achsen opsz 6..12, wght 300..900)
   Quelle: Google Fonts, SIL Open Font License 1.1 - siehe fonts/OFL.txt
   Kein Request an Google, daher keine Weitergabe von Besucher-IPs.
   ========================================================================== */

@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/nunito-sans-latin-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/nunito-sans-latin-ext-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/nunito-sans-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Nunito Sans";
  font-style:italic;
  font-weight:300 900;
  font-display:swap;
  src:url("fonts/nunito-sans-latin-ext-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   ContextMAP - Website
   ========================================================================== */

:root{
  --navy:        #00214b;   /* Flächen, Buttons, starke Typo */
  --navy-text:   #1d3269;   /* Überschriften & Fließtext blau  */
  --rule:        #4b5b87;   /* senkrechte Trennlinien          */
  --white:       #ffffff;
  --signal:      #ffc247;   /* Akzent im News-Banner           */
  --grad:        linear-gradient(96deg,#062d63 0%,#0d4d9c 62%,#1160bd 100%);
  --wrap:        798px;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--navy-text);
  font-family:"Nunito Sans","Nunito",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:rgba(0,33,75,.10);
}

img{max-width:100%;display:block}
/* <picture> ist nur Huelle - das <img> bleibt die Layout-Box.
   display:contents reicht die Kinder nach oben durch, deshalb muss <source>
   ausdruecklich verschwinden: in einer Flex-Reihe zaehlte es sonst als
   nulbreites Kind mit und erzeugte einen zusaetzlichen Abstand.             */
picture{display:contents}
source{display:none}

a{text-decoration:none;color:inherit}

p{margin:0}

.wrap{
  width:min(100% - 32px, var(--wrap));
  margin-inline:auto;
}

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

.site-header{padding-top:89px}

/* space-between verteilt den frei bleibenden Platz gleichmäßig auf die fünf
   Zwischenräume. gap ist nur die Untergrenze für schmale Fenster.           */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.008em;
  color:var(--navy);
  line-height:1;
}

.nav-link{
  font-size:17px;
  color:var(--navy);
  line-height:1;
  white-space:nowrap;
}

.nav-link:hover,.brand:hover{opacity:.72}

/* Kleiner Pfeil nach rechts oben: zeigt, dass der Link die Webseite verlaesst
   und auf die Studio-Plattform fuehrt. Groesse haengt am Text (em).          */
.ext-arrow{
  width:.62em;
  height:.62em;
  margin-left:5px;
  vertical-align:.02em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ------------------------- Menuetaste (schmale Fenster) ------------------- */
/* Am Schreibtisch loest display:contents die Huelle auf: die Links sind dann
   wieder unmittelbare Kinder der Leiste und werden wie zuvor verteilt.       */
.nav-links{display:contents}

.nav-toggle{
  display:none;
  flex:none;
  width:44px;
  height:40px;
  margin:0 -9px 0 0;
  padding:0;
  border:0;
  border-radius:6px;
  background:none;
  color:var(--navy);
  cursor:pointer;
}

.nav-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

.nav-burger{
  position:relative;
  display:block;
  width:22px;
  height:2px;
  margin:0 auto;
  border-radius:2px;
  background:currentColor;
}

.nav-burger::before,
.nav-burger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}

.nav-burger::before{top:-7px}
.nav-burger::after {top:7px}

.nav-burger,
.nav-burger::before,
.nav-burger::after{transition:transform 200ms cubic-bezier(.22,.61,.36,1), background-color 120ms ease}

/* Offen: aus den drei Strichen wird ein Kreuz. */
.nav-open .nav-burger{background:transparent}
.nav-open .nav-burger::before{transform:translateY(7px)  rotate(45deg)}
.nav-open .nav-burger::after {transform:translateY(-7px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .nav-burger,.nav-burger::before,.nav-burger::after{transition:none}
}

/* --------------------------------- Buttons -------------------------------- */

.btn{
  display:inline-block;
  background:var(--navy);
  color:var(--white);
  text-align:center;
  border-radius:4px;
  line-height:1;
}

.btn:hover{background:#0a3068}

.btn-nav{
  font-size:17px;
  padding:7px 13px 8px;
}

.btn-cta{
  font-size:17px;
  padding:9px 18px 10px;
  min-width:477px;
  margin-right:24px;
}

/* Beide Handlungsaufforderungen tragen den Verlauf des News-Banners. */
.btn-nav,
.btn-cta{
  background:var(--grad);
  box-shadow:0 1px 2px rgba(0,33,75,.28);
  transition:box-shadow 160ms ease, filter 160ms ease;
}

.btn-nav:hover,
.btn-cta:hover{
  background:var(--grad);
  filter:brightness(1.08);
  box-shadow:0 2px 7px rgba(0,33,75,.34);
}

@media (prefers-reduced-motion:reduce){
  .btn-nav,.btn-cta{transition:none}
  .btn-nav:hover,.btn-cta:hover{filter:none}
}

/* ============================== NEWS-BANNER ============================== */
/* Ankuendigungsleiste zwischen Navigation und Hero. Klick oeffnet das
   Detail-Popup "KI-Modelle lokal in Ihrem Keller". Eigenes Blau plus Signalgelb,
   damit die Meldung sich sowohl vom weissen Blatt als auch vom Hero abhebt. */

.news{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  margin:16px 0 0;
  padding:10px 14px 11px;
  border:0;
  border-radius:5px;
  background:var(--grad);
  color:var(--white);
  font-family:inherit;
  font-size:13px;
  line-height:1;
  text-align:left;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,33,75,.28);
  transition:box-shadow 160ms ease, filter 160ms ease;
}

/* Signalkante links: der Blick faellt zuerst auf die Meldung. */
.news::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:5px 0 0 5px;
  background:var(--signal);
}

.news:hover{filter:brightness(1.08);box-shadow:0 2px 7px rgba(0,33,75,.34)}
.news:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.news-tag{
  flex:none;
  margin-left:4px;
  padding:4px 8px 5px;
  border-radius:3px;
  background:var(--signal);
  color:var(--navy);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.news-text{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
}

.news-text b{font-weight:800}

.news-more{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-bottom:1px;
  border-bottom:1px solid rgba(255,255,255,.45);
  color:var(--white);
  font-weight:800;
  white-space:nowrap;
}

.news:hover .news-more{border-bottom-color:var(--signal);color:var(--signal)}

.news-arrow{transition:transform 160ms ease}
.news:hover .news-arrow{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .news,.news-arrow{transition:none}
  .news:hover{filter:none}
  .news:hover .news-arrow{transform:none}
}

/* Schmale Fenster: der Hinweis darf umbrechen, der Link rutscht darunter. */
@media (max-width:560px){
  .news{flex-wrap:wrap;gap:8px;line-height:17px}
  .news-more{flex:1 1 100%;order:3}
}

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

.hero{
  position:relative;
  margin-top:19px;
  height:279px;
  background:var(--navy);
  color:var(--white);
  overflow:hidden;
}

.hero-copy{
  position:relative;
  z-index:1;
  padding:21px 0 0 27px;
}

.hero h1{
  margin:0;
  font-size:28.5px;
  font-weight:800;
  line-height:40px;
  letter-spacing:-.005em;
}

/* -------------------------------- Checkliste ------------------------------ */

.checks{
  display:flex;
  margin:11.5px 0 0;
  padding:0;
  list-style:none;
}

.checks li{
  display:flex;
  align-items:flex-start;
  gap:8.5px;
  font-size:12.25px;
  line-height:16px;
}

.checks li{flex:none}
.checks li:nth-child(1){width:148px}
.checks li:nth-child(2){width:145px}

.check{
  width:13.5px;
  height:13.5px;
  flex:none;
  margin-top:1.5px;
  color:var(--white);
}

.hero-text{
  margin-top:42.5px;
  font-size:17.5px;
  line-height:22.5px;
}

/* Die beiden tragenden Begriffe des Absatzes. 800 wie ueberall auf der
   Seite, wo betont wird - die Browser-Vorgabe 700 waere hier zu leise. */
.hero-text b{font-weight:800}

.hero-photo{
  position:absolute;
  right:0;
  bottom:0;
  height:269px;
  width:auto;
  max-width:none;
  z-index:0;
}

/* =============================== 3 SCHRITTE ============================== */

.steps{padding:0 12px}

.steps-head{
  margin:33px 0 0;
  font-size:23.6px;
  font-weight:800;
  line-height:32px;
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--navy-text);
}

.step{
  display:grid;
  grid-template-columns:232px 36px minmax(0,1fr);
  align-items:center;
}

.step-1{margin-top:39px}
.step-2{margin-top:56px}
.step-3{margin-top:74px}
.step-2 .step-label{margin-top:8px}

.step-label{
  font-size:16.5px;
  line-height:21px;
  color:var(--navy-text);
}

.step-label strong{font-weight:800}

.rule{
  align-self:stretch;
  justify-self:start;
  width:1px;
  background:var(--rule);
}

/* ------------------------------- Schritt 1 -------------------------------- */

.model-groups{display:flex}
.model-group:first-child{width:300px;flex:none}

.model-cap{
  font-size:13.5px;
  line-height:16px;
  color:var(--navy);
  margin-bottom:6px;
}

.logo-row{
  display:flex;
  align-items:center;
  height:25px;
}

.logo{width:auto;max-width:none}
.logo-chatgpt{height:21px;margin-left:4px;margin-right:16px}
.logo-claude {height:19px;margin-right:16px}
.logo-gemini {height:22px}
.logo-qwen   {height:24px;margin-right:24px}
.logo-llama  {height:22px}

/* --- Mini-Button "Details anzeigen" ------------------------------------- */

.detail-btn{
  position:absolute;
  margin:0;
  padding:4px 9px 5px;
  border:0;
  border-radius:3px;
  background:var(--navy);
  color:var(--white);
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  opacity:0;
  transform:translateY(2px);
  transition:opacity 150ms ease, transform 150ms ease;
  pointer-events:none;
}

.detail-btn:hover{background:#0a3068}

/* Position: unter der Logo-Reihe (Schritt 1) bzw. rechts neben der Zeile (Schritt 3) */
.model-group{position:relative}
.model-group .detail-btn{top:100%;left:2px;margin-top:8px}

.step-list li{position:relative}
.step-list .detail-btn{
  left:0;
  top:100%;
  margin-top:2px;
  padding:3px 8px;
  font-size:10.5px;
  transform:translateY(-2px);
}

/* Unsichtbare Bruecke ueber den Abstand zwischen Gruppe und Button: der Zeiger
   verlaesst die Gruppe und betritt sofort den Button, ohne Luecke dazwischen. */
.detail-btn::before{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:100%;
  height:14px;
}

/* Einblenden bei Hover oder Tastaturfokus */
.model-group:hover .detail-btn,
.step-list li:hover .detail-btn,
.detail-btn:hover,
.detail-btn:focus-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.detail-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Touch-Geräte: dauerhaft sichtbar, aber zurückhaltend */
@media (hover:none){
  .detail-btn{opacity:1;transform:none;pointer-events:auto;background:#42527d}
}

@media (prefers-reduced-motion:reduce){
  .detail-btn{transition:none;transform:none}
}

/* ------------------------------- Schritt 2 -------------------------------- */

.apps{display:flex;gap:6px}

.app-title{
  height:17px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  font-size:15.5px;
  font-weight:800;
  line-height:17px;
  color:#000;
  letter-spacing:-.01em;
}

.app-logo{height:28px;width:auto;flex:none}

.shot{
  position:relative;
  width:224px;
  height:167px;
  overflow:hidden;
}

.shot-frame{
  position:absolute;
  top:0;
  left:0;
  width:1728px;
  height:1288px;
  border:0;
  transform:scale(0.12962963);
  transform-origin:0 0;
  pointer-events:none;
}

/* --- Hover-Button auf den Mockups + Lightbox ---------------------------- */

.shot-zoom{
  position:absolute;
  inset:0;
  z-index:2;
  margin:0;
  padding:0;
  border:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:rgba(0,33,75,.55);
  color:var(--white);
  font-family:inherit;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity 160ms ease;
  -webkit-backdrop-filter:saturate(1.1) blur(1px);
  backdrop-filter:saturate(1.1) blur(1px);
}

.shot-zoom-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px 9px;
  border-radius:4px;
  background:var(--navy);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transform:translateY(3px);
  transition:transform 160ms ease;
}

.shot-zoom-pill svg{width:16px;height:16px;flex:none}

.shot:hover .shot-zoom-pill,
.shot-zoom:focus-visible .shot-zoom-pill{transform:none}

.shot:hover .shot-zoom,
.shot-zoom:focus-visible{opacity:1}

.shot-zoom:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* Touch-Geräte kennen kein Hover -> Button dauerhaft, aber dezent */
@media (hover:none){
  .shot-zoom{
    opacity:1;
    background:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    align-items:flex-end;
    justify-content:flex-end;
    padding:7px;
  }
  .shot-zoom-pill{transform:none;padding:6px 10px 7px;font-size:12.5px}
  .shot-zoom-pill svg{width:14px;height:14px}
}

@media (prefers-reduced-motion:reduce){
  .shot-zoom,.shot-zoom-pill{transition:none}
  .shot-zoom-pill{transform:none}
}

/* ------------------------------- Lightbox --------------------------------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.lightbox[hidden]{display:none}

.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,10,26,.72);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  animation:lb-fade 180ms ease both;
}

.lightbox-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  max-width:100%;
  max-height:100%;
  animation:lb-rise 220ms cubic-bezier(.22,.61,.36,1) both;
}

.lightbox-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
  color:var(--white);
}

.lightbox-title{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1;
}

.lightbox-close{
  flex:none;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:4px;
  background:rgba(255,255,255,.14);
  color:var(--white);
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.26)}
.lightbox-close svg{width:16px;height:16px}
.lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.lightbox-stage{
  position:relative;
  overflow:hidden;
  border-radius:5px;
  background:var(--white);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Leinwand in Originalmassstab mal Faktor: traegt die Groesse, damit die
   Buehne darum herum scrollen kann (transform allein erzeugt keinen Platz). */
.lightbox-canvas{
  position:relative;
  width:100%;
  height:100%;
}

.lightbox-frame{
  position:absolute;
  top:0;
  left:0;
  width:1728px;
  height:1288px;
  border:0;
  transform-origin:0 0;
}

/* Handy: Ausschnitt schieben statt alles winzig einpassen. */
.lightbox-stage.is-pan{
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.lightbox-hint{
  flex:1 1 auto;
  min-width:0;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  color:rgba(255,255,255,.7);
}
.lightbox-hint[hidden]{display:none}

/* ---------------------- Inhalt der Detail-Popups -------------------------- */

.lightbox-panel.is-doc{width:min(100%, 720px)}

.lightbox-doc{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px 30px 30px;
  border-radius:5px;
  background:var(--white);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  color:var(--navy-text);
  font-size:14px;
  line-height:1.5;
}
.lightbox-doc[hidden]{display:none}
.lightbox-doc:focus{outline:none}

.d-lead{
  font-size:15.5px;
  line-height:1.45;
  font-weight:600;
  color:var(--navy);
  margin-bottom:22px;
}

.d-h{
  margin:24px 0 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#5c6c96;
}
.d-h:first-child{margin-top:0}

.d-list{margin:0;padding-left:17px}
.d-list li + li{margin-top:6px}

.d-steps{margin:0;padding-left:19px}
.d-steps li + li{margin-top:9px}
.d-steps strong{font-weight:800;color:var(--navy)}

.d-two{display:grid;grid-template-columns:1fr 1fr;gap:8px 34px}
/* Die Spalten-Ueberschriften sind :first-child und haben daher keine eigene
   Marge: den Abstand zum vorherigen Block traegt das Raster selbst. */
.d-two{margin-top:26px}
.d-two:first-child,.d-h + .d-two{margin-top:0}

.d-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.d-card{
  padding:13px 14px 14px;
  border:1px solid #e2e6ef;
  border-left:3px solid var(--navy);
  border-radius:4px;
  background:#fafbfd;
}
.d-card img{display:block;height:18px;width:auto;max-width:130px;margin-bottom:8px}
/* Feinabstimmung je Marke: die Wortmarken haben sehr unterschiedliche
   Versalhöhen im Bild, deshalb wird die Bildhöhe optisch angeglichen.       */
/* nur die Hoehe wird vorgegeben - Breite ergibt sich, sonst greift das
   width-Attribut aus dem HTML und staucht das Logo */
.d-logo-chatgpt,.d-logo-claude,.d-logo-gemini,.d-logo-mistral,
.d-logo-qwen,.d-logo-llama,.d-logo-deepseek{width:auto}

.d-logo-chatgpt {height:20px}
.d-logo-claude  {height:18px}
.d-logo-gemini  {height:21px}
.d-logo-mistral {height:19px}
.d-logo-qwen    {height:19px}
.d-logo-llama   {height:18px}
.d-logo-deepseek{height:19px}
.d-card p{font-size:13px;line-height:1.42}
.d-card-name{font-weight:800;color:var(--navy);margin-bottom:3px}

.d-table{
  border:1px solid #e2e6ef;
  border-radius:4px;
  overflow:hidden;
  font-size:13px;
}
.d-row{display:grid;grid-template-columns:1fr 1.3fr 1.6fr;gap:14px;padding:9px 13px}
.d-row + .d-row{border-top:1px solid #e9ecf3}
.d-row--head{
  background:var(--navy);
  color:var(--white);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.d-row:not(.d-row--head) span:first-child{font-weight:800;color:var(--navy)}

.d-note{
  margin-top:20px;
  padding:12px 14px;
  border-radius:4px;
  background:#eef1f7;
  font-size:13px;
  line-height:1.45;
  color:var(--navy);
}

/* Persoenlicher Zusatz im Lokal-Popup: Foto links, Text rechts.
   Das Foto sitzt in einer eigenen Huelle, weil picture{display:contents}
   sonst <source> und <img> beide zu Grid-Kindern macht.                 */
.d-personal{
  margin-top:20px;
  padding:18px;
  border:1px solid #e2e6ef;
  border-left:3px solid var(--navy);
  border-radius:4px;
  background:#fafbfd;
  display:grid;
  grid-template-columns:minmax(0,300px) 1fr;
  gap:20px;
  align-items:center;
}
.d-personal-photo{
  min-width:0;
  border-radius:3px;
  overflow:hidden;
}
.d-personal-photo img{
  display:block;
  width:100%;
  height:auto;
}
.d-personal-text{min-width:0}
.d-personal .d-h{margin-top:0}
.d-personal p{font-size:13px;line-height:1.55}
.d-personal p + p{margin-top:9px}
.d-personal-sign{
  margin-top:11px;
  font-weight:800;
  color:var(--navy);
}

.d-shot{
  position:relative;
  width:100%;
  overflow:hidden;
  border:1px solid #e2e6ef;
  border-radius:4px;
}
.d-shot-frame{
  position:absolute;
  top:0;
  left:0;
  width:1728px;
  height:1288px;
  border:0;
  transform-origin:0 0;
  pointer-events:none;
}
.d-cap{margin-top:7px;font-size:12px;color:#5c6c96}

@media (max-width:640px){
  .lightbox-doc{padding:20px 18px 24px;font-size:13.5px}
  .d-two,.d-cards{grid-template-columns:1fr;gap:10px}
  .d-personal{grid-template-columns:1fr;gap:14px}
  .d-personal-photo{max-width:340px}
  .d-two > div + div .d-h{margin-top:20px}
  .d-row{grid-template-columns:1fr;gap:2px}
  .d-row--head{display:none}
  .d-row:not(.d-row--head) span:first-child{margin-bottom:2px}
}

@keyframes lb-fade{from{opacity:0}to{opacity:1}}
@keyframes lb-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .lightbox-backdrop,.lightbox-panel{animation:none}
}

.apps-cap{
  margin-top:25px;
  font-size:13.2px;
  line-height:1;
  color:var(--navy);
}

/* ------------------------------- Schritt 3 -------------------------------- */

.step-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:13.5px;
  line-height:14px;
  color:var(--navy);
}

.step-list li + li{margin-top:20.5px}

/* ================================== CTA ================================== */

.cta-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:75px;
}

.cta-line{
  margin-bottom:26px;
  text-align:center;
  font-size:17.5px;
  line-height:24px;
  color:var(--navy-text);
}

.cta-line b{font-weight:800}

/* =============================== LEISTUNGEN ============================== */

.services{
  margin-top:42px;
  background:var(--navy);
  color:var(--white);
  padding:35px 30px 42px 24px;
}

.services-head{
  font-size:16px;
  font-weight:800;
  line-height:21px;
}

.services-list{
  margin:21px 0 0;
  padding:0 0 0 9px;
  list-style:none;
  font-size:16.3px;
  line-height:21px;
}

.services-list li{
  position:relative;
  padding-left:20px;
}

.services-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--white);
}

.services-list li + li{margin-top:21px}

/* =============================== VERSPRECHEN ============================= */

.promise{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0;
  margin-top:43px;
}

.promise-copy{padding-left:5px;width:370px;flex:none}

.quote{
  font-size:19px;
  line-height:24.7px;
  color:var(--navy-text);
}

.quote em{font-style:italic}

.promise-line{
  margin-top:22px;
  font-size:19px;
  line-height:24.7px;
  color:var(--navy-text);
}

.contact{
  margin-top:23px;
  font-size:21.5px;
  font-weight:800;
  line-height:29px;
  color:var(--navy);
}

.promise-photo{
  width:417px;
  height:239px;
  object-fit:cover;
  flex:none;
}

/* ============================== HÄUFIGE FRAGEN =========================== */
/* Ein <details> statt eines Skript-Aufklappers: Er funktioniert ohne
   JavaScript, und der Antworttext steht auch zugeklappt im Quelltext - genau
   darauf kommt es an, wenn eine Suchmaschine die Seite liest.               */

.faq{margin-top:64px}

.faq-titel,
.region-titel{
  margin:0;
  font-size:21.5px;
  font-weight:800;
  line-height:28px;
  color:var(--navy);
}

.faq-intro{
  margin:11px 0 0;
  font-size:16.3px;
  line-height:22px;
  color:var(--navy-text);
}

.faq-intro a{color:var(--navy);text-underline-offset:3px}

.faq-list{
  margin-top:22px;
  border-top:1px solid rgba(29,50,105,.18);
}

.faq-item{border-bottom:1px solid rgba(29,50,105,.18)}

.faq-item summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:14px 2px;
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:700;
  line-height:23px;
  color:var(--navy);
}

.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{color:#0d4d9c}

.faq-item summary:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  border-radius:3px;
}

/* Plus wird zu Kreuz: eine Drehung um 45 Grad, kein zweites Symbol. */
.faq-sign{
  flex:none;
  width:17px;
  height:17px;
  margin-top:3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  transition:transform .18s ease;
}

.faq-item[open] .faq-sign{transform:rotate(45deg)}

.faq-answer{padding:0 2px 18px}

.faq-answer p{
  margin:0;
  max-width:66ch;
  font-size:16.3px;
  line-height:23px;
  color:var(--navy-text);
}

/* ============================== EINSATZGEBIET =========================== */

.region{margin-top:56px}

.region-text{
  margin:12px 0 0;
  max-width:66ch;
  font-size:16.3px;
  line-height:23px;
  color:var(--navy-text);
}

.region-text b{font-weight:800;color:var(--navy)}

/* Anschrift und Rufnummer stehen hier ein zweites Mal, wortgleich zum
   Impressum. Bei örtlichen Suchtreffern zählt genau diese Gleichheit. */
.region-nap{
  margin-top:20px;
  padding:15px 18px;
  border-left:3px solid var(--navy);
  background:rgba(29,50,105,.05);
  font-style:normal;
  font-size:16.3px;
  line-height:23px;
  color:var(--navy-text);
}

.region-nap b{color:var(--navy)}
.region-nap a{color:var(--navy);text-underline-offset:3px}

.region-link{
  display:inline-block;
  margin-top:4px;
  padding-bottom:2px;
  border-bottom:2px solid var(--signal);
  font-weight:800;
  color:var(--navy);
  text-decoration:none;
}

.region-arrow{
  display:inline-block;
  margin-left:5px;
  transition:transform .18s ease;
}

.region-link:hover .region-arrow{transform:translateX(3px)}

@media (max-width:620px){
  .faq{margin-top:48px}
  .region{margin-top:44px}
  .faq-titel,
  .region-titel{font-size:19.5px;line-height:26px}
  .faq-item summary{font-size:16.3px;line-height:22px;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .faq-sign,
  .region-arrow{transition:none}
}

/* ================================= FOOTER ================================ */

.site-footer{
  display:flex;
  justify-content:center;
  gap:31px;
  margin-top:75px;
  padding-bottom:103px;
  font-size:17px;
  color:var(--navy);
}

.site-footer a:hover{opacity:.72}

/* ============ FOKUS-HALO ============================================
   Kurzes, weiches Aufleuchten des angesteuerten Abschnitts: ein breiter,
   sehr schwacher Rahmen (innen klar) plus ein noch weicherer aeusserer
   Schein. Fuehrt das Auge, ohne die Aufmerksamkeit zu beanspruchen.
   ------------------------------------------------------------------- */

html{scroll-behavior:smooth}

.halo{position:relative;scroll-margin-top:36px}

.halo::before,
.halo::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
  z-index:3;
  border-radius:34px;
  will-change:opacity,transform;
}

/* aeusserer Schein - sehr weit, sehr schwach, ohne erkennbare Kante */
.halo::before{
  inset:-52px -40px;
  box-shadow:0 0 84px 10px rgba(29,50,105,.075);
}

/* breiter Rahmen - zum Rand hin sanft blau, in der Mitte voellig klar */
.halo::after{
  inset:-30px -24px;
  box-shadow:inset 0 0 66px 20px rgba(29,50,105,.10);
}

/* auf den navyfarbenen Flaechen leuchtet der Rahmen hell statt dunkel */
.halo--dark::before{
  inset:-44px -34px;
  box-shadow:0 0 80px 8px rgba(29,50,105,.11);
}
.halo--dark::after{
  inset:0;
  border-radius:0;
  box-shadow:inset 0 0 74px 24px rgba(160,198,248,.13);
}

/* schmale, flache Ziele (CTA-Zeile) bekommen einen enger gefuehrten Rahmen */
.halo--tight::before{
  inset:-38px 8%;
  box-shadow:0 0 64px 4px rgba(29,50,105,.075);
}
.halo--tight::after{
  inset:-24px 16%;
  box-shadow:inset 0 0 42px 10px rgba(29,50,105,.11);
}

.halo.is-flash::before{animation:halo-bloom 1900ms cubic-bezier(.28,.05,.2,1)  40ms both}
.halo.is-flash::after {animation:halo-ring  1550ms cubic-bezier(.28,.05,.2,1) 110ms both}

@keyframes halo-ring{
  0%   {opacity:0;   transform:scale(1.014)}
  27%  {opacity:1;   transform:scale(1)}
  50%  {opacity:.92; transform:scale(1)}
  100% {opacity:0;   transform:scale(.997)}
}

@keyframes halo-bloom{
  0%   {opacity:0}
  32%  {opacity:1}
  100% {opacity:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .halo.is-flash::before,
  .halo.is-flash::after{animation:none}
}

/* Zwischen rund 860 und 920 px ist der Seitenrand schmaler als der Ausschlag
   des Halos - dort wird er begrenzt, sonst laesst sich die Seite waagerecht
   schieben, ohne dass etwas zu sehen waere.                                 */
@media (max-width:920px){
  .halo::before      {inset:-52px -18px}
  .halo::after       {inset:-30px -12px}
  .halo--dark::before{inset:-44px -16px}
}

/* ================================ RESPONSIV ==============================
   Handy- und Tablet-Fassung. Schrift, Farben und Motive bleiben die der
   Schreibtisch-Fassung; anders ist nur die Verteilung: eine Spalte, Menue
   hinter der Menuetaste, Bilder ueber die volle Blattbreite, Schaltflaechen
   gross genug fuer den Daumen.
   ====================================================================== */

/* --------------------------------------------------------------------------
   Bis 860 px: die Navigationsleiste passt nicht mehr in eine Zeile, und die
   dreispaltigen Schritte werden untereinander gelegt.
   -------------------------------------------------------------------------- */
@media (max-width:860px){

  /* Sprungmarken duerfen nicht unter der klebenden Leiste landen. */
  html{scroll-padding-top:72px}
  .halo{scroll-margin-top:84px}

  /* ------------------------------ Kopfzeile ------------------------------ */

  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    padding-top:0;
    background:var(--white);
    transition:box-shadow 180ms ease;
  }

  /* Erst beim Scrollen setzt sich die Leiste mit einer feinen Kante ab. */
  .site-header.is-stuck{box-shadow:0 1px 0 rgba(0,33,75,.09), 0 8px 20px rgba(0,33,75,.07)}

  .nav{
    position:relative;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:12px;
    padding:11px 0 12px;
  }

  .brand{margin-right:auto;font-size:24px}

  .btn-nav{font-size:15.5px;padding:11px 14px;border-radius:5px}

  .nav-toggle{display:block}

  /* Ohne JavaScript setzt niemand die Klasse js-nav: dann bleiben alle Links
     sichtbar und brechen wie bisher um - die Seite bleibt vollstaendig. */
  html:not(.js-nav) .nav{flex-wrap:wrap;justify-content:flex-start}
  html:not(.js-nav) .nav-toggle{display:none}

  .js-nav .nav-links{
    position:absolute;
    top:100%;
    left:-6px;
    right:-6px;
    z-index:60;
    display:grid;
    padding:6px;
    border-radius:7px;
    background:var(--white);
    box-shadow:0 0 0 1px rgba(0,33,75,.08), 0 16px 38px rgba(0,33,75,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(-9px);
    pointer-events:none;
    transition:opacity 170ms ease,
               transform 210ms cubic-bezier(.22,.61,.36,1),
               visibility 0s linear 210ms;
  }

  .js-nav .site-header.nav-open .nav-links{
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    transition-delay:0s;
  }

  .js-nav .nav-links .nav-link{
    display:block;
    padding:14px 12px;
    border-radius:5px;
    font-size:17px;
    line-height:1.2;
    white-space:normal;
  }

  .js-nav .nav-links .nav-link + .nav-link{box-shadow:inset 0 1px 0 #eaeef6}
  .js-nav .nav-links .nav-link:hover{background:#f2f5fb;opacity:1}

  @media (prefers-reduced-motion:reduce){
    .js-nav .nav-links{transition:none}
  }

  /* ------------------------------ News-Banner ---------------------------- */

  .news{margin-top:14px;padding:11px 14px 12px}

  /* --------------------------------- Hero -------------------------------- */
  /* Das Foto rutscht aus der absoluten Lage in den Fluss und schliesst die
     dunkle Flaeche nach unten ab - der Aufbau bleibt Text ueber Bild.        */

  .hero{height:auto;margin-top:16px;padding-bottom:0}

  .hero-copy{padding:24px 20px 10px}

  .hero h1{font-size:clamp(20px,5.7vw,27px);line-height:1.26}

  .checks{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:17px;
  }

  /* Schriftgroesse, Abstand und Hakengroesse kommen bewusst aus der
     Grundfassung - so wirkt jede Feinjustierung dort auch hier.             */
  .checks li,
  .checks li:nth-child(1),
  .checks li:nth-child(2){
    width:auto;
    align-items:center;
    line-height:1.35;
  }

  .checks li br{display:none}

  .check{margin-top:0}

  /* Die Textspalte ist jetzt schmaler als die gesetzten Umbrueche lang sind. */
  .hero-text{margin-top:22px;font-size:16px;line-height:1.5}
  .hero-text br{display:none}
  .contact-page .contact-hero-text br{display:none}

  /* Das Foto ist freigestellt, die Flaeche dahinter bleibt navy. Es rutscht
     aus der absoluten Lage in den Fluss und schliesst den dunklen Block nach
     unten ab - hier noch in seinen natuerlichen Massen.                     */
  .hero-photo{
    position:static;
    width:100%;
    height:auto;
    max-width:100%;
  }

  /* ------------------------------ 3 Schritte ----------------------------- */

  .steps{padding:0}

  .steps-head{
    margin-top:34px;
    white-space:normal;
    font-size:clamp(18px,4.6vw,22px);
    line-height:1.3;
    letter-spacing:0;
  }

  /* Die Beschriftung setzt sich ueber den Block, die feine Linie fuehrt
     weiter senkrecht daneben: das Motiv der Schreibtisch-Fassung bleibt.    */
  .step{
    grid-template-columns:1px minmax(0,1fr);
    grid-template-areas:
      "label label"
      "rule  body";
    align-items:start;
    row-gap:15px;
    column-gap:17px;
  }

  .step-1{margin-top:30px}
  .step-2{margin-top:44px}
  .step-3{margin-top:44px}
  .step-2 .step-label{margin-top:0}

  .step-label{grid-area:label;font-size:17px;line-height:1.35}
  .step-body {grid-area:body;min-width:0}

  .rule{grid-area:rule;display:block;align-self:stretch;justify-self:start}

  /* Schritt 1: die zwei Modellgruppen untereinander ------------------------ */

  .model-groups{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }

  .model-group:first-child{width:auto}

  .model-cap{font-size:14px;line-height:1.35;margin-bottom:10px}

  .logo-row{height:auto;flex-wrap:wrap;gap:12px 20px}

  .logo-chatgpt,.logo-claude,.logo-gemini,.logo-qwen,.logo-llama{margin:0}
  .logo-chatgpt{height:23px}
  .logo-claude {height:21px}
  .logo-gemini {height:24px}
  .logo-qwen   {height:26px}
  .logo-llama  {height:24px}

  /* "Details anzeigen" ohne Zeigegeraet: dauerhaft sichtbar und im Fluss,
     damit nichts den Text darunter verdeckt.                                */
  .detail-btn,
  .step-list .detail-btn{
    position:static;
    display:inline-flex;
    align-items:center;
    margin:12px 0 0;
    padding:10px 15px;
    font-size:12.5px;
    background:var(--navy);
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  .detail-btn::before{display:none}

  /* Schritt 2: Vorschauen untereinander, jede ueber die volle Breite ------- */

  .apps{display:grid;grid-template-columns:1fr;gap:26px}

  .app{min-width:0}

  .app-title{height:auto;font-size:16px;line-height:1.25;margin-bottom:10px}
  .app-logo{height:26px}

  .shot{width:100%;max-width:none;height:auto;aspect-ratio:224/167}

  .apps-cap{margin-top:20px;font-size:13.5px;line-height:1.45}

  /* Schritt 3: Liste mit Luft, Text darf umbrechen ------------------------- */

  .step-list{font-size:14px;line-height:1.5}
  .step-list li{display:flex;flex-direction:column;align-items:flex-start}
  .step-list li + li{margin-top:22px}

  /* ---------------------------------- CTA -------------------------------- */

  .cta-wrap{margin-top:54px}

  .cta-line{font-size:16.5px;line-height:1.5;margin-bottom:22px}

  .btn-cta{
    min-width:0;
    width:100%;
    margin-right:0;
    padding:15px 18px;
    font-size:16px;
    line-height:1.3;
    border-radius:5px;
  }

  /* ------------------------------ Leistungen ----------------------------- */

  .services{margin-top:38px;padding:26px 20px 30px}
  .services-head{font-size:16.5px;line-height:1.35}
  .services-list{margin-top:19px;padding-left:2px;font-size:16px;line-height:1.45}
  .services-list li{padding-left:19px}
  .services-list li::before{top:7px}
  .services-list li + li{margin-top:17px}

  /* ------------------------------ Versprechen ---------------------------- */

  .promise{flex-direction:column;margin-top:40px}

  .promise-copy{width:auto;padding-left:0}

  .quote,.promise-line{font-size:17px;line-height:1.45}
  .promise-line{margin-top:18px}

  .contact{margin-top:20px;font-size:19px;line-height:1.5}

  .promise-photo{width:100%;height:auto;margin-top:24px;aspect-ratio:16/9}

  /* ---------------------------------- Fuss ------------------------------- */

  .site-footer{
    flex-wrap:wrap;
    gap:6px 22px;
    margin-top:46px;
    padding-bottom:54px;
    font-size:16px;
  }

  .site-footer a{padding:8px 2px}

  /* ------------------------------- Fokus-Halo ---------------------------- */

  .halo::before{inset:-26px -14px}
  .halo::after{inset:-16px -10px}
  .halo--dark::before{inset:-22px -12px}
  .halo--dark::after{inset:0}
  .halo--tight::before{inset:-30px -6px}
  .halo--tight::after{inset:-18px 0}
}

/* --------------------------------------------------------------------------
   621 bis 860 px (Tablet hochkant): hier ist noch Platz fuer den Aufbau der
   Schreibtisch-Fassung - Text links, freigestelltes Foto rechts unten.
   -------------------------------------------------------------------------- */
@media (min-width:621px) and (max-width:860px){
  .hero{display:flex;align-items:flex-end;gap:14px}
  .hero-copy{flex:1 1 auto;padding:26px 0 28px 24px}
  .hero-photo{flex:0 0 auto;width:45%;align-self:flex-end}

}

/* --------------------------------------------------------------------------
   Bis 620 px: echtes Handyformat. Hier zaehlt jede Zeile Hoehe.
   -------------------------------------------------------------------------- */
@media (max-width:620px){

  /* Auch die uebrigen gesetzten Umbrueche passen nicht mehr in die Zeile. */
  .cta-line br,
  .services-list br{display:none}

  /* Ausschnitt: das leere linke Drittel faellt weg, damit Gruender und
     Grafikkarte auf dem kleinen Schirm gross genug stehen.                  */
  .hero-photo,
  .contact-hero-photo{
    aspect-ratio:4/3;
    object-fit:cover;
    object-position:88% center;
  }

  .lightbox{padding:14px}

  .lightbox-bar{gap:10px;margin-bottom:8px}
  .lightbox-title{font-size:14px}

  .lightbox-close{width:38px;height:38px}
  .lightbox-close svg{width:18px;height:18px}

  .lightbox-doc{-webkit-overflow-scrolling:touch}

  .site-footer{gap:2px 20px}
}

/* --------------------------------------------------------------------------
   Bis 400 px: sehr schmale Geraete. Marke und Handlungsaufforderung muessen
   zusammen mit der Menuetaste in eine Zeile passen.
   -------------------------------------------------------------------------- */
@media (max-width:400px){
  .nav{gap:9px}
  .brand{font-size:21px}
  .btn-nav{font-size:14px;padding:10px 11px}
  .nav-toggle{width:40px}

  .hero-copy{padding:21px 16px 23px}
  .services{padding:24px 17px 28px}
  .contact{font-size:17.5px}
  .quote,.promise-line{font-size:16.5px}
}


/* ================================ LEGAL ==================================
   Unterseiten Impressum / Datenschutz - gleiche Typo wie die Startseite,
   nur einspaltig und ohne Bildflaechen.
   ====================================================================== */

.legal{padding-top:52px}

.legal h1{
  font-size:40px;
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:0 0 10px;
}

.legal .legal-meta{
  font-size:16px;
  color:var(--rule);
  margin:0 0 34px;
}

.legal h2{
  font-size:24px;
  font-weight:800;
  line-height:1.25;
  color:var(--navy);
  margin:44px 0 12px;
}

.legal h3{
  font-size:19px;
  font-weight:700;
  line-height:1.3;
  color:var(--navy);
  margin:28px 0 8px;
}

.legal p,
.legal li{
  font-size:17px;
  line-height:1.62;
}

.legal p{margin:0 0 12px}

.legal ul{
  margin:0 0 12px;
  padding-left:20px;
}

.legal li{margin-bottom:6px}

/* Fliesstext-Links im Rechtstext - Buttons ausgenommen, die haben eigene Farben */
.legal a:not(.btn){
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:2px;
}

.legal a:not(.btn):hover{opacity:.72}

.legal address{
  font-style:normal;
  font-size:17px;
  line-height:1.62;
}

.legal-block{
  border-left:2px solid var(--rule);
  padding-left:18px;
  margin:0 0 22px;
}

.legal-back{
  display:inline-block;
  margin-top:48px;
  font-size:17px;
  font-weight:700;
  color:var(--navy);
}

.legal-back:hover{opacity:.72}

.legal-note{
  font-size:15px;
  line-height:1.6;
  color:var(--rule);
  margin-top:40px;
}

@media (max-width:640px){
  .legal{padding-top:34px}
  .legal h1{font-size:30px}
  .legal h2{font-size:21px;margin-top:34px}
  .legal p,.legal li,.legal address{font-size:16px}
}

/* ------------------------------ Kontakt/Demo ----------------------------- */

.contact-page{padding-top:0}

.contact-hero{
  position:relative;
  margin:19px 0 40px;
  height:380px;
  /* Gleicher Verlauf wie News-Banner und "Demo buchen"-Taste. */
  background:var(--grad);
  color:var(--white);
  overflow:hidden;
}

.contact-hero-copy{
  position:relative;
  z-index:1;
  padding:21px 0 0 24px;
}

.contact-page .contact-hero h1{
  margin:0 0 5px;
  font-size:30px;
  font-weight:800;
  line-height:38px;
  letter-spacing:-.01em;
  color:var(--white);
}

.contact-page .contact-hero-text{
  margin:0;
  font-size:19px;
  font-weight:400;
  line-height:27px;
}

/* Links im Hero: keine Unterstreichung aus dem Rechtstext-Stil erben */
.contact-page .contact-hero a{text-decoration:none}

.contact-page .contact-hero-btn{
  display:inline-block;
  margin:44px 0 0 29px;
  padding:8px 47px;
  border-radius:8px;
  background:var(--white);
  color:var(--navy);
  font-size:16px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}

.contact-page .contact-hero-btn:hover{background:#e8edf6}

.contact-page .contact-hero-contact{
  margin:24px 0 0 29px;
  font-size:21px;
  font-weight:800;
  line-height:34px;
}

.contact-page .contact-hero-contact a{display:block;color:var(--white);text-decoration:none}
.contact-page .contact-hero-contact a:hover{opacity:.78}

.contact-hero-photo{
  position:absolute;
  right:-6px;
  bottom:0;
  height:350px;
  width:auto;
  max-width:none;
  z-index:0;
}

@media (max-width:860px){
  /* Wie auf der Startseite: das freigestellte Foto schliesst die dunkle
     Flaeche nach unten ab, statt rechts hineinzuragen.                      */
  .contact-hero{height:auto;margin-top:16px;padding-bottom:0}
  .contact-hero-copy{padding:22px 20px 12px}
  .contact-page .contact-hero h1{font-size:clamp(22px,6.4vw,28px);line-height:1.25}
  .contact-page .contact-hero-text{font-size:16px;line-height:1.5}
  .contact-page .contact-hero-btn{
    margin:26px 0 0;
    width:100%;
    padding:15px 20px;
    text-align:center;
    border-radius:5px;
  }
  .contact-page .contact-hero-contact{margin:24px 0 0;font-size:17px;line-height:1.85}

  .contact-hero-photo{
    position:static;
    width:100%;
    height:auto;
    max-width:100%;
  }
}

/* Tablet hochkant: wie auf der Startseite bleibt es beim Nebeneinander. */
@media (min-width:621px) and (max-width:860px){
  .contact-hero{display:flex;align-items:flex-end;gap:14px}
  .contact-hero-copy{flex:1 1 auto;padding:24px 0 28px 24px}
  .contact-hero-photo{flex:0 0 auto;width:44%;align-self:flex-end}
  .contact-page .contact-hero-btn{width:auto;padding:14px 34px}
}

/* ==========================================================================
   Kopier-Button für E-Mail & Telefon (siehe copy.js)
   Stil identisch zu .detail-btn ("Details anzeigen"), nur mit grünem Haken.
   ========================================================================== */

.copy-wrap{position:relative;display:inline-block}

.copy-btn{
  position:absolute;
  top:100%;
  left:0;
  margin:8px 0 0;
  padding:4px 9px 5px;
  border:0;
  border-radius:3px;
  background:var(--navy);
  color:var(--white);
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:-.005em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  opacity:0;
  transform:translateY(2px);
  transition:opacity 150ms ease, transform 150ms ease;
  pointer-events:none;
  z-index:5;
}

.copy-btn:hover{background:#0a3068}

/* Unsichtbare Brücke über den Abstand, damit der Zeiger den Button erreicht */
.copy-btn::before{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:100%;
  height:14px;
}

.copy-wrap:hover .copy-btn,
.copy-btn:hover,
.copy-btn:focus-visible,
.copy-btn.is-copied{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.copy-btn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.copy-btn-check{
  width:11px;
  height:11px;
  fill:none;
  stroke:#4ad07f;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transform:scale(.6);
  transition:opacity .16s ease,transform .16s ease;
}

.copy-btn.is-copied .copy-btn-check{opacity:1;transform:scale(1)}

/* Kontakt-Hero liegt auf dunkler Fläche: gleiche Form, invertierte Farben */
.contact-hero .copy-btn{background:var(--white);color:var(--navy)}
.contact-hero .copy-btn:hover{background:#e8edf6}
.contact-hero .copy-btn .copy-btn-check{stroke:#1a9d4d}
.contact-hero .copy-btn:focus-visible{outline-color:var(--white)}

/* Kontaktseite: Links stehen untereinander, Wrapper übernimmt den Umbruch */
.contact-page .contact-hero-contact .copy-wrap{display:block}
.contact-page .contact-hero-contact .copy-wrap a{display:inline-block}

@media (prefers-reduced-motion:reduce){
  .copy-btn,.copy-btn-check{transition:none}
}

/* Handy: die Kopier-Schaltflaeche steht neben der Angabe, statt beim
   Ueberfahren aufzutauchen - ein Finger kann nicht ueberfahren, sonst waere
   sie dort nie erreichbar. Muss nach der Grunddefinition oben stehen.       */
@media (hover:none) and (max-width:860px), (max-width:620px){
  .copy-wrap{display:inline-flex;align-items:center}

  /* Abstand ueber margin statt gap: auf der Kontaktseite bleibt die Huelle
     ein Block, damit jede Angabe ihre eigene Zeile behaelt.                 */
  .copy-btn{
    position:static;
    margin:0 0 0 10px;
    padding:9px 13px;
    min-height:32px;
    font-size:11.5px;
    vertical-align:middle;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  .copy-btn::before{display:none}

  /* Die Schaltflaechen sind hoeher als eine Textzeile: Kontakt- und
     Adresszeilen bekommen entsprechend mehr Durchschuss.                    */
  .contact{line-height:1.9}
  .legal address{line-height:2.5}

  /* Kontaktseite: jede Angabe ist eine eigene Reihe. Passt die Schaltflaeche
     nicht mehr daneben, rutscht sie mit sauberem Abstand darunter.          */
  .contact-page .contact-hero-contact{line-height:1.35}
  .contact-page .contact-hero-contact .copy-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px 10px;
  }
  .contact-page .contact-hero-contact .copy-wrap + .copy-wrap{margin-top:13px}
  .contact-page .contact-hero-contact .copy-btn{margin:0}
}