/* ==========================================================================
   lumafy 2026 — Stylesheet
   Tokens nach Auftrag §11 (Produktwerte). Abstände nur 4/8/12/16/24/32/48,
   Abstände zwischen Seitenbereichen 96 (= 2 × 48).
   Akzentfarbe trägt genau eine Handlung: „Kostenlos testen" (.btn--test).
   ========================================================================== */

@font-face{font-family:"Outfit";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/outfit-200-latin.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:"Outfit";font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/outfit-200-latin-ext.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:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/outfit-300-latin.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:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/outfit-300-latin-ext.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:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/outfit-400-latin.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:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/outfit-400-latin-ext.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:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-500-latin.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:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/outfit-500-latin-ext.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:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-600-latin.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:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/outfit-600-latin-ext.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:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin.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:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin-ext.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:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500-latin.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:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500-latin-ext.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}

/* --------------------------------------------------------------- Tokens */
:root{
  /* Flächen (§11) */
  --paper:        #FDFBF7;   /* Papier */
  --paper-2:      #F6F1E8;   /* abgeleitet: zweite Fläche für Wechselbereiche */
  --card:         #FFFFFF;
  --dark:         #1A1611;   /* = Tinte, für dunkle Bänder */
  --dark-2:       #2A251E;

  /* Schrift */
  --ink:          #1A1611;   /* Tinte, 17,4 : 1 auf Papier */
  --ink-soft:     #3D372F;   /* 11,4 : 1 */
  --ink-mute:     #6F6D69;   /* 5,0 : 1 auf Papier, 4,6 : 1 auf --paper-2 */
  --ink-inv:      #FDFBF7;
  --ink-inv-mute: #A8A196;   /* 7,0 : 1 auf --dark */

  /* Linien */
  --line:         #EDE4D5;   /* Linie (§11), nur Trennlinien */
  --line-strong:  #9A8F7C;   /* 3,1 : 1 — Formularfelder, Rahmen mit Bedeutung */
  --line-inv:     rgba(253,251,247,.16);

  /* Akzent — nur „Kostenlos testen" */
  --accent:       #F5A623;
  --accent-hover: #E0951A;   /* Text darauf 7,4 : 1 */
  --on-accent:    #1A140B;   /* 9,0 : 1 */

  /* Schriftfamilien */
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:96px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1392px;

  /* Radien, Bewegung */
  --r-sm:6px; --r:14px; --r-card:18px; --r-lg:22px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 72px;
}

/* --------------------------------------------------------------- Basis */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + var(--s4)); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); font-weight:300; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--ink); color:var(--ink-inv); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.nc{ text-transform:none; letter-spacing:.02em; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--s4); top:-100px; z-index:100; background:var(--ink); color:var(--ink-inv); padding:var(--s3) var(--s4); border-radius:var(--r-sm); }
.skip:focus{ top:var(--s4); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.icon{ width:24px; height:24px; flex:none; }

/* Mono-Bereichstitel — die einzige Stelle mit Versalien (§11) */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:var(--s5);
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; }
.eyebrow a:hover{ color:var(--ink); }

/* Überschriften: zweiteilig, Schlussteil durch Gewicht hervorgehoben (statt Amber) */
h1 em, h2 em{ font-style:normal; font-weight:400; }

/* --------------------------------------------------------------- Knöpfe */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:var(--s3) var(--s5); border-radius:999px;
  font-family:var(--font-sans); font-weight:400; font-size:15px; line-height:1.2; text-align:center;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--ghost:hover{ background:var(--ink); color:var(--ink-inv); }
.btn--dark{ background:var(--ink); color:var(--ink-inv); }
.btn--dark:hover{ background:var(--dark-2); border-color:var(--dark-2); }
.btn--test{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:500; }
.btn--test:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn--ghost-inv{ border-color:rgba(253,251,247,.45); color:var(--ink-inv); }
.btn--ghost-inv:hover{ background:var(--ink-inv); border-color:var(--ink-inv); color:var(--ink); }
.btn--sm{ min-height:40px; padding:var(--s2) var(--s4); font-size:14px; }
.icon--btn{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover .icon--btn{ transform:translateX(3px); }
.btn--sm .icon--btn{ display:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:var(--s2); font-size:15px; font-weight:400; border-bottom:1px solid currentColor; padding-bottom:var(--s1); }
.icon--link{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link-arrow:hover .icon--link{ transform:translateX(3px); }

.test-note{ font-size:14px; color:var(--ink-mute); margin-top:var(--s3); max-width:44ch; }
.test-note.on-dark{ color:var(--ink-inv-mute); }

/* --------------------------------------------------------------- Logo */
.logo{ display:inline-flex; align-items:center; gap:var(--s2); color:var(--ink); }
.logo .mark{ width:32px; height:32px; }
.logo .word{ font-size:24px; font-weight:300; letter-spacing:-.01em; }
.logo.on-dark{ color:var(--ink-inv); }

/* --------------------------------------------------------------- Kopfzeile */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(253,251,247,.9);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); height:var(--nav-h); }
.nav__links{ display:flex; align-items:center; gap:var(--s5); font-size:15px; font-weight:400; color:var(--ink-soft); }
.nav__links a{ position:relative; padding:var(--s2) 0; }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right .3s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-current::after{ right:0; }
.nav__links a.is-current{ color:var(--ink); }
.nav__right{ display:flex; align-items:center; gap:var(--s4); }
.lang{ display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; }
.lang a{ padding:var(--s2) var(--s3); color:var(--ink-mute); line-height:1; }
.lang a + a{ border-left:1px solid var(--line); }
.lang a:hover{ color:var(--ink); }
.lang a.is-active{ background:var(--ink); color:var(--ink-inv); }
.nav__login{ font-size:15px; font-weight:400; color:var(--ink-soft); padding:var(--s2) 0; border-bottom:1px solid transparent; }
.nav__login:hover{ border-bottom-color:currentColor; color:var(--ink); }
.nav__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r-sm); }
.nav__burger .icon--close{ display:none; }
.nav.is-open .nav__burger .icon--close{ display:block; }
.nav.is-open .nav__burger .icon--menu{ display:none; }
.nav__mobile{ border-top:1px solid var(--line); background:var(--paper); max-height:calc(100vh - var(--nav-h)); overflow:auto; }
.nav__mobile nav{ display:flex; flex-direction:column; padding:var(--s2) 0; }
.nav__mobile nav a{ font-size:18px; font-weight:400; padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.nav__mobile nav a[aria-current="page"]{ font-weight:500; }
.nav__mobile-lang{ display:flex; gap:var(--s5); padding:var(--s5) 0 var(--s6); font-size:15px; }
.nav__mobile-lang a{ color:var(--ink-mute); }
.nav__mobile-lang a[aria-current="true"]{ color:var(--ink); font-weight:500; }

@media (max-width:1180px){
  .nav__links{ gap:var(--s4); font-size:14px; }
}
@media (max-width:1040px){
  .nav__links, .nav__login, .nav__right .lang{ display:none; }
  .nav__burger{ display:inline-flex; }
  .nav__right{ gap:var(--s3); }
}
@media (max-width:380px){
  .logo .word{ font-size:21px; }
  .nav__right .btn--sm{ padding:var(--s2) var(--s3); font-size:13px; }
}

/* --------------------------------------------------------------- Bereiche */
.section{ padding:var(--s8) 0; }
.section--paper{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__more{ margin-top:var(--s6); }
.note{ margin-top:var(--s6); color:var(--ink-mute); }

.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--s5) var(--s6);
  margin-bottom:var(--s7); padding-top:var(--s6); border-top:1px solid var(--line);
}
.sec-head .eyebrow{ margin-bottom:var(--s4); }
.sec-head h2{ font-size:clamp(34px, 4.4vw, 60px); font-weight:200; line-height:1.02; letter-spacing:-.025em; max-width:18ch; }
.sec-head__sub{ max-width:42ch; color:var(--ink-soft); }

/* --------------------------------------------------------------- Held Startseite */
.hero{ padding:var(--s8) 0; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,22,17,.05) 1px, transparent 0);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 80%); mask-image:linear-gradient(to bottom, #000 0%, transparent 80%);
}
.hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7); align-items:center; }
.hero__title{ font-size:clamp(40px, 5.6vw, 80px); font-weight:200; line-height:1; letter-spacing:-.035em; margin-bottom:var(--s5); }
.hero__title em{ display:block; }
.hero__lead{ font-size:clamp(17px, 1.35vw, 20px); color:var(--ink-soft); max-width:48ch; }
.hero__facts{ margin-top:var(--s4); font-size:15px; color:var(--ink-mute); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
@media (max-width:1000px){ .hero__grid{ grid-template-columns:1fr; } }

/* Prinzip-Grafik: Formular → Bildschirm */
.principle{ margin:0; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1.2fr); align-items:center; gap:var(--s4); }
.principle__form{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); box-shadow:0 24px 48px -32px rgba(26,22,17,.35); }
.principle__label{ font-size:13px; font-weight:400; color:var(--ink-mute); margin-bottom:var(--s3); }
.pf-field{ border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s2) var(--s3); margin-bottom:var(--s2); background:var(--paper); }
.pf-field span{ display:block; font-size:11px; color:var(--ink-mute); }
.pf-field b{ display:block; font-weight:400; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-save{ margin-top:var(--s3); text-align:center; font-size:13px; font-weight:400; background:var(--ink); color:var(--ink-inv); border-radius:999px; padding:var(--s2); }
.principle__arrow{ color:var(--ink-mute); }
.principle__cap{ grid-column:1 / -1; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-mute); text-align:center; }
@media (max-width:560px){
  .principle{ grid-template-columns:1fr; }
  .principle__arrow{ transform:rotate(90deg); justify-self:center; }
}

/* Bildschirmrahmen (aus dem bisherigen Held übernommen) */
.screen{
  position:relative; margin:0; background:var(--dark); border:1px solid var(--ink); border-radius:var(--r);
  box-shadow:0 40px 80px -24px rgba(26,22,17,.35); overflow:hidden;
}
.screen::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 34%); pointer-events:none; }
.screen--quer{ aspect-ratio:16/9; }
.screen--photo img{ width:100%; height:100%; object-fit:cover; }
.screen__slide{ position:absolute; inset:0; padding:6% 8%; display:flex; flex-direction:column; justify-content:center; color:var(--ink-inv); }
.ss-kicker{ font-family:var(--font-mono); font-size:clamp(9px, .9vw, 12px); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-inv-mute); }
.ss-title{ font-size:clamp(17px, 1.9vw, 30px); font-weight:200; line-height:1.05; margin-top:var(--s2); letter-spacing:-.02em; }
.ss-price{ font-size:clamp(22px, 2.6vw, 40px); font-weight:400; margin-top:var(--s2); }

/* --------------------------------------------------------------- Vertrauensleiste */
.trust{ background:var(--dark); color:var(--ink-inv); padding:var(--s7) 0; }
.trust__facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s4) var(--s6); margin-bottom:var(--s6); }
.trust__facts li{ display:inline-flex; align-items:center; gap:var(--s2); font-size:16px; font-weight:400; }
.trust__facts .icon{ width:20px; height:20px; color:var(--ink-inv-mute); }
.trust__label{ text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-inv-mute); margin-bottom:var(--s4); }
.trust__logos{ display:grid; grid-template-columns:repeat(3,1fr); max-width:880px; margin:0 auto; border-top:1px solid var(--line-inv); border-bottom:1px solid var(--line-inv); }
.trust__logos li{ display:flex; align-items:center; justify-content:center; height:112px; padding:var(--s5); border-right:1px solid var(--line-inv); }
.trust__logos li:last-child{ border-right:0; }
.trust__logos img{ max-height:52px; max-width:170px; width:auto; height:auto; object-fit:contain; }
@media (max-width:700px){
  .trust__logos{ grid-template-columns:1fr; }
  .trust__logos li{ border-right:0; border-bottom:1px solid var(--line-inv); height:96px; }
  .trust__logos li:last-child{ border-bottom:0; }
}

/* --------------------------------------------------------------- 3 Schritte */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); counter-reset:step; }
.step{ padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.step__num{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute); margin-bottom:var(--s6); }
.step h3{ font-size:24px; font-weight:300; line-height:1.15; letter-spacing:-.01em; margin-bottom:var(--s3); }
.step p{ font-size:15px; color:var(--ink-soft); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Vorlagen */
.tpl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--s5); align-items:start; }
.tpl figure{ margin:0; }
.tpl img{ width:100%; border-radius:var(--r-sm); border:1px solid var(--ink); background:var(--dark); }
.tpl--hoch img{ max-width:62%; margin:0 auto; }
.tpl figcaption{ display:flex; justify-content:space-between; gap:var(--s3); margin-top:var(--s3); font-size:15px; font-weight:400; }
.tpl__fmt{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-mute); }
.tpl[hidden]{ display:none; }
.tpl-names{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--s5); }
.tpl-names__group{ padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.tpl-names__group h3{ font-size:20px; font-weight:300; margin-bottom:var(--s4); }
.tpl-names__group h3 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ display:inline-flex; align-items:center; min-height:32px; padding:var(--s1) var(--s3); border:1px solid var(--line-strong); border-radius:999px; font-size:14px; font-weight:400; color:var(--ink-soft); background:transparent; }
a.chip:hover, button.chip:hover{ border-color:var(--ink); color:var(--ink); }
button.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--ink-inv); }

.tpl-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.tpl-card{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:var(--s4); align-items:center; padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.tpl-card h3{ font-size:20px; font-weight:300; line-height:1.2; }
.tpl-card p{ grid-column:2; font-family:var(--font-mono); font-size:12px; color:var(--ink-mute); margin-top:var(--s1); }
.tpl-card__shape{ grid-row:1 / span 2; display:flex; align-items:flex-end; gap:var(--s1); }
.tpl-card__shape i{ display:block; border:1px solid var(--ink); border-radius:2px; background:var(--dark); }
.tpl-card__shape i:first-child{ width:32px; height:18px; }
.tpl-card__shape i:last-child{ width:14px; height:24px; }
@media (max-width:1000px){ .tpl-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tpl-cards{ grid-template-columns:1fr; } }
.filters{ display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s6); }
.filters__row{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.filters__count{ font-size:14px; color:var(--ink-mute); }

.custom-tpl{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s5); }
.custom-tpl h2{ font-size:clamp(28px, 3.4vw, 44px); font-weight:200; line-height:1.05; letter-spacing:-.02em; margin-bottom:var(--s3); }
.custom-tpl p{ color:var(--ink-soft); }

/* --------------------------------------------------------------- Branchen */
.industries{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.industry a{ display:flex; flex-direction:column; height:100%; padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); transition:border-color .25s var(--ease), transform .25s var(--ease); }
.industry a:hover{ border-color:var(--ink); transform:translateY(-2px); }
.industry h3{ font-size:22px; font-weight:300; line-height:1.15; letter-spacing:-.01em; margin-bottom:var(--s3); }
.industry p{ font-size:14px; color:var(--ink-soft); margin-bottom:var(--s5); }
.industry__more{ margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2); font-size:14px; font-weight:400; }
@media (max-width:1100px){ .industries{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .industries{ grid-template-columns:1fr; } }

.uses{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.use{ padding:var(--s5); border-top:1px solid var(--ink); }
.use__num{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--ink-mute); margin-bottom:var(--s4); }
.use p{ font-size:20px; font-weight:300; line-height:1.35; }
@media (max-width:900px){ .uses{ grid-template-columns:1fr; } }
.chips--links{ gap:var(--s3); }
.chips--cloud{ gap:var(--s3); max-width:960px; }
.chips--cloud .chip{ font-size:15px; min-height:40px; padding:var(--s2) var(--s4); background:var(--card); }

/* --------------------------------------------------------------- Sechs Gründe */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.reason{ padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.reason__icon{ display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r); margin-bottom:var(--s5); }
.reason h3{ font-size:22px; font-weight:300; line-height:1.15; letter-spacing:-.01em; margin-bottom:var(--s3); }
.reason p{ font-size:15px; color:var(--ink-soft); }
@media (max-width:1000px){ .reasons{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .reasons{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Preise */
.price-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); max-width:1040px; }
.price-cards--3{ grid-template-columns:repeat(3,1fr); max-width:none; }
.price-card{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) var(--s5); background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); }
.price-card--pro{ border-color:var(--ink); }
.price-card__tag{ font-size:14px; font-weight:400; color:var(--ink-mute); }
.price-card__title{ font-size:26px; font-weight:300; line-height:1.1; }
.price-card__price{ font-size:44px; font-weight:200; letter-spacing:-.02em; line-height:1; margin-top:var(--s2); }
.price-card__price small{ display:block; font-size:14px; font-weight:300; letter-spacing:0; color:var(--ink-mute); margin-top:var(--s2); }
.price-card__lede{ font-size:15px; color:var(--ink-soft); }
.price-card__list{ display:flex; flex-direction:column; gap:var(--s2); padding-top:var(--s4); margin-top:var(--s2); border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); }
.price-card__list li{ display:flex; gap:var(--s2); }
.price-card__list li::before{ content:"—"; color:var(--ink-mute); }
.price-card__cta{ margin-top:auto; padding-top:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s3); }
.price-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s6); padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); max-width:1040px; }
.price-cards--3 ~ .price-foot{ max-width:none; }
.price-foot p{ color:var(--ink-soft); }
.price-foot strong{ font-weight:500; color:var(--ink); }
.price-legal{ margin-top:var(--s3); font-size:14px; color:var(--ink-mute); }
@media (max-width:1000px){ .price-cards--3{ grid-template-columns:1fr; max-width:640px; } }
@media (max-width:800px){ .price-cards{ grid-template-columns:1fr; } }

/* Großer Satz */
.statement{ background:var(--dark); color:var(--ink-inv); padding:var(--s8) 0; }
.statement__text{ font-size:clamp(34px, 5vw, 72px); font-weight:200; line-height:1.02; letter-spacing:-.03em; max-width:20ch; }
.statement__sub{ margin-top:var(--s5); font-size:18px; color:var(--ink-inv-mute); max-width:48ch; }

/* Regeln, Preiserklärung */
.rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.rules li{ padding:var(--s5) 0; border-top:1px solid var(--ink); }
.rules h3{ font-size:20px; font-weight:400; margin-bottom:var(--s3); }
.rules p{ color:var(--ink-soft); font-size:15px; }
@media (max-width:900px){ .rules{ grid-template-columns:1fr; } }
.explain{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:start; }
.explain h2{ font-size:clamp(30px, 3.6vw, 48px); font-weight:200; line-height:1.05; letter-spacing:-.02em; }
.explain__body p + p{ margin-top:var(--s4); }
.explain__body p{ color:var(--ink-soft); font-size:18px; }
.explain__body strong{ color:var(--ink); font-weight:500; }
@media (max-width:900px){ .explain{ grid-template-columns:1fr; gap:var(--s5); } }

/* Funktionsvergleich */
.ftable-wrap{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.ftable{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; }
.ftable th, .ftable td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.ftable thead th{ background:var(--paper-2); font-weight:500; font-size:15px; color:var(--ink); }
.ftable thead th:not(:first-child), .ftable td{ text-align:center; width:120px; }
.ftable tbody th{ font-weight:300; color:var(--ink-soft); }
.ftable tbody tr:last-child th, .ftable tbody tr:last-child td{ border-bottom:0; }
.ftable sup{ font-size:11px; margin-left:2px; }
.ft-yes, .ft-no{ display:inline-flex; }
.ft-yes .icon{ width:20px; height:20px; color:var(--ink); }
.ft-no .icon{ width:20px; height:20px; color:var(--ink-mute); }
.ftable-note{ margin-top:var(--s3); font-size:14px; color:var(--ink-mute); }

/* FAQ */
.faq{ max-width:880px; }
.faq details{ border-top:1px solid var(--line-strong); }
.faq details:last-child{ border-bottom:1px solid var(--line-strong); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s4); padding:var(--s5) 0; font-size:20px; font-weight:300; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:200; font-size:28px; line-height:.8; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 var(--s5); color:var(--ink-soft); max-width:64ch; }

/* --------------------------------------------------------------- Amazon Signage */
.amazon{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s7); align-items:center; padding:var(--s7); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); }
.amazon h2{ font-size:clamp(32px, 4vw, 54px); font-weight:200; line-height:1.02; letter-spacing:-.025em; margin-bottom:var(--s4); }
.amazon__copy p{ color:var(--ink-soft); max-width:46ch; margin-bottom:var(--s5); }
.amazon__copy .eyebrow{ margin-bottom:var(--s4); }
.amazon__svg{ width:100%; max-width:420px; margin:0 auto; }
.tv{ position:relative; max-width:420px; margin:0 auto; }
.tv__screen{ aspect-ratio:16/9; background:var(--dark); border:1px solid var(--ink); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.tv__code{ font-size:clamp(22px, 3vw, 34px); font-weight:300; color:var(--ink-inv); letter-spacing:-.01em; }
.tv__stick{ position:absolute; right:12%; bottom:-24px; width:56px; height:24px; border:1px solid var(--ink); border-radius:var(--r-sm); background:var(--card); }
.tv__stick::before{ content:""; position:absolute; left:50%; top:-9px; width:14px; height:9px; transform:translateX(-50%); border:1px solid var(--ink); border-bottom:0; background:var(--card); }
@media (max-width:900px){ .amazon{ grid-template-columns:1fr; padding:var(--s6) var(--s5); } }

/* --------------------------------------------------------------- Schlussband */
.cta-band{ padding:var(--s8) 0; }
.cta-band__inner{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--s7); align-items:center; padding:var(--s7); border-radius:var(--r-lg); background:var(--dark); color:var(--ink-inv); }
.cta-band h2{ font-size:clamp(32px, 4.4vw, 60px); font-weight:200; line-height:1.02; letter-spacing:-.025em; }
.cta-band__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
@media (max-width:900px){ .cta-band__inner{ grid-template-columns:1fr; padding:var(--s6) var(--s5); gap:var(--s5); } }

/* --------------------------------------------------------------- Unterseiten-Kopf */
.subhero{ padding:var(--s8) 0 var(--s7); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.subhero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,22,17,.05) 1px, transparent 0); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(to bottom, #000 20%, transparent 90%); mask-image:linear-gradient(to bottom, #000 20%, transparent 90%);
}
.subhero__inner{ position:relative; }
.subhero__inner--photo{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s7); align-items:center; }
.subhero__title{ font-size:clamp(40px, 6.4vw, 96px); font-weight:200; line-height:.98; letter-spacing:-.035em; max-width:16ch; margin-bottom:var(--s5); }
.subhero__title em{ display:block; }
.subhero--branche .subhero__title em{ display:inline; }
.subhero__sub{ font-size:clamp(17px, 1.35vw, 20px); color:var(--ink-soft); max-width:56ch; }
.subhero__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.subhero__photo{ margin:0; }
.subhero__photo img{ width:100%; border-radius:var(--r); border:1px solid var(--ink); }
@media (max-width:1000px){ .subhero__inner--photo{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Funktionen */
.feature-group{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:var(--s7); }
.feature-group__head{ align-self:start; position:sticky; top:calc(var(--nav-h) + var(--s5)); }
.feature-group__icon{ display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r); margin-bottom:var(--s5); }
.feature-group__head h2{ font-size:clamp(30px, 3.6vw, 48px); font-weight:200; line-height:1.05; letter-spacing:-.02em; }
.feature-group__img{ margin-top:var(--s5); border-radius:var(--r); border:1px solid var(--line); }
.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.feature{ padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.feature h3{ font-size:20px; font-weight:400; line-height:1.2; margin-bottom:var(--s2); }
.feature p{ font-size:15px; color:var(--ink-soft); }
.feature__note{ margin-top:var(--s2); font-size:14px !important; color:var(--ink-mute) !important; }
.badge{ display:inline-block; vertical-align:middle; margin-left:var(--s2); padding:var(--s1) var(--s2); border:1px solid var(--ink); border-radius:999px; font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:.04em; }
@media (max-width:1000px){ .feature-group{ grid-template-columns:1fr; gap:var(--s5); } .feature-group__head{ position:static; } }
@media (max-width:640px){ .features{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Geräte, Fakten */
.devices{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.device{ padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); display:flex; flex-direction:column; gap:var(--s3); }
.device__icon{ display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r); margin-bottom:var(--s3); }
.device h3{ font-size:24px; font-weight:300; line-height:1.15; }
.device__kind{ font-size:14px; font-weight:400; color:var(--ink-mute); }
.device p{ color:var(--ink-soft); font-size:15px; }
.device .link-arrow{ margin-top:auto; align-self:flex-start; }
@media (max-width:900px){ .devices{ grid-template-columns:1fr; } }

.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.facts--2{ grid-template-columns:repeat(2,1fr); max-width:960px; }
.fact{ padding:var(--s6) var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.fact__icon{ display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; border:1px solid var(--line-strong); border-radius:var(--r); margin-bottom:var(--s5); }
.fact h2{ font-size:22px; font-weight:300; line-height:1.15; margin-bottom:var(--s3); }
.fact p{ font-size:15px; color:var(--ink-soft); }
@media (max-width:1000px){ .facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .facts, .facts--2{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- Kontakt */
.contact{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--s6); align-items:start; }
.form-card{ padding:var(--s6); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); }
.kform{ display:flex; flex-direction:column; gap:var(--s4); }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.fld{ display:flex; flex-direction:column; gap:var(--s2); }
.fld label{ font-size:14px; font-weight:400; color:var(--ink); }
.fld input, .fld textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:var(--s3) var(--s4);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.fld textarea{ resize:vertical; min-height:160px; }
.fld input:hover, .fld textarea:hover{ border-color:var(--ink-mute); }
.fld input:focus, .fld textarea:focus{ outline:none; border-color:var(--ink); background:var(--card); box-shadow:0 0 0 1px var(--ink); }
.fld .is-invalid, .consent.is-invalid{ border-color:#9E2A1C; }
.consent{ display:flex; gap:var(--s3); align-items:flex-start; font-size:14px; color:var(--ink-soft); cursor:pointer; }
.consent input{ margin-top:var(--s1); width:18px; height:18px; accent-color:var(--ink); flex:none; }
.consent a{ text-decoration:underline; text-underline-offset:3px; }
.form-error{ padding:var(--s3) var(--s4); border:1px solid #9E2A1C; border-radius:var(--r-sm); background:#FBF1EE; color:#6E1D12; font-size:15px; }
.form-error a{ text-decoration:underline; }
.form-actions{ margin-top:var(--s2); }
.form-success{ text-align:center; padding:var(--s7) var(--s4); }
.form-success__icon{ display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:50%; background:var(--ink); color:var(--ink-inv); margin-bottom:var(--s5); }
.form-success h2{ font-size:32px; font-weight:200; letter-spacing:-.02em; margin-bottom:var(--s3); }
.form-success p{ color:var(--ink-soft); }
.contact__side{ display:flex; flex-direction:column; gap:var(--s4); }
.side-card{ padding:var(--s5); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.side-card h3{ font-size:22px; font-weight:300; line-height:1.15; }
.side-card p{ font-size:15px; color:var(--ink-soft); }
.side-card .test-note{ margin-top:0; }
.side-card__tag{ font-size:14px !important; font-weight:400; color:var(--ink-mute) !important; }
.side-card--dark{ background:var(--dark); border-color:var(--dark); color:var(--ink-inv); }
.side-card--dark .side-card__tag{ color:var(--ink-inv-mute) !important; }
.side-card--dark address{ display:flex; flex-direction:column; gap:var(--s3); font-size:16px; }
.side-card--dark address a{ display:inline-flex; align-items:center; gap:var(--s2); }
.side-card--dark address a:hover{ text-decoration:underline; text-underline-offset:3px; }
.side-card--dark .icon{ width:18px; height:18px; color:var(--ink-inv-mute); }
@media (max-width:1000px){ .contact{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form-card{ padding:var(--s5) var(--s4); } }

/* --------------------------------------------------------------- Rechtstexte */
.legal-hero{ padding:var(--s8) 0 var(--s6); border-bottom:1px solid var(--line); }
.legal-hero__inner{ max-width:880px; }
.legal-hero__crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:var(--s4); }
.legal-hero h1{ font-size:clamp(44px, 6.4vw, 80px); font-weight:200; letter-spacing:-.025em; line-height:1; }
.legal-hero__lede{ margin-top:var(--s5); font-size:18px; color:var(--ink-soft); max-width:62ch; }
.legal{ padding:var(--s7) 0 var(--s8); }
.legal__inner{ max-width:880px; }
.legal h2{ font-size:22px; font-weight:500; margin:var(--s7) 0 var(--s4); padding-top:var(--s6); border-top:1px solid var(--line); }
.legal__inner > h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.legal h3{ font-size:17px; font-weight:500; margin:var(--s6) 0 var(--s2); }
.legal p, .legal li{ color:var(--ink-soft); font-size:16px; line-height:1.75; }
.legal p{ margin:0 0 var(--s4); }
.legal ul{ list-style:disc; padding-left:var(--s5); margin:var(--s2) 0 var(--s4); }
.legal li{ margin:var(--s2) 0; }
.legal strong{ font-weight:500; color:var(--ink); }
.legal a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal .meta{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ink-mute); }

/* --------------------------------------------------------------- Fußzeile */
.footer{ background:var(--dark); color:var(--ink-inv); padding:var(--s8) 0 var(--s6); }
.footer__top{ display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:var(--s6); padding-bottom:var(--s7); border-bottom:1px solid var(--line-inv); }
.footer__brand p{ color:var(--ink-inv-mute); font-size:15px; margin:var(--s4) 0 var(--s5); max-width:34ch; }
.footer__head{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-inv-mute); margin-bottom:var(--s4); }
.footer__col ul{ display:flex; flex-direction:column; gap:var(--s2); font-size:15px; }
.footer__col a:hover, .footer__bottom a:hover, .footer__contact a:hover{ text-decoration:underline; text-underline-offset:3px; }
.footer__contact address{ font-size:15px; line-height:1.7; color:var(--ink-inv); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s4); padding-top:var(--s5); font-size:14px; color:var(--ink-inv-mute); }
.footer__legal, .footer__lang{ display:flex; flex-wrap:wrap; gap:var(--s4); }
@media (max-width:1100px){ .footer__top{ grid-template-columns:repeat(3, 1fr); } .footer__brand{ grid-column:1 / -1; } }
@media (max-width:640px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__contact{ grid-column:1 / -1; } }

/* --------------------------------------------------------------- Einblenden */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* --------------------------------------------------------------- Druck */
@media print{
  .nav, .footer, .cta-band, .skip{ display:none !important; }
  body{ background:#fff; }
}

/* --------------------------------------------------------------- Handy: kürzere Abstände */
@media (max-width:640px){
  .section, .cta-band, .statement{ padding:var(--s7) 0; }
  .hero, .subhero{ padding:var(--s7) 0; }
  .legal-hero{ padding:var(--s7) 0 var(--s5); }
  .legal{ padding:var(--s6) 0 var(--s7); }
  .footer{ padding:var(--s7) 0 var(--s5); }
  .sec-head{ margin-bottom:var(--s6); padding-top:var(--s5); }
}

/* ================================================================ Grafiken der bisherigen Seite
   Wiederhergestellt am 30.09.2026 (Cedric): Branchen-Bildschirm der Startseite und der
   Branchenseiten, Übersicht der Anwendung (/funktionen), lumafy Screen (/geraete),
   Ansprechpartner (/kontakt), Europa-Grafik (/sicherheit), kleine Funktionsgrafiken.
   Im Bildschirm stehen Beispielinhalte eines Kunden — dort darf Amber vorkommen.
   Außerhalb des Bildschirms gilt weiter: Akzent nur für „Kostenlos testen". */

/* --- Bildschirm-Beispiel: Variablen der bisherigen Seite auf die neuen Farben abgebildet */
.display-stage{
  --amber:#F5A623; --bg-dark:#0C0C0C; --rule:var(--line); --rule-strong:var(--line-strong);
}
.display-stage{ position:relative; }
.display{
  position:relative; aspect-ratio:9/16; max-height:560px;
  margin:0 auto; max-width:340px;
  background:var(--bg-dark);
  border:1px solid var(--ink); border-radius:14px;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.25);
  overflow:hidden;
}
.display::after{
  content:''; position:absolute; inset:0; border-radius:13px;
  background:linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 34%);
  pointer-events:none; z-index:6;
}
.display::before{
  content:''; position:absolute; inset:0; border-radius:13px;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 24px rgba(0,0,0,.35);
  pointer-events:none; z-index:5;
}
.display__frame{
  position:absolute; inset:0; padding:14px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.display__layer{
  position:absolute; inset:14px; opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  display:flex; flex-direction:column;
}
.display__layer.is-active{ opacity:1; transform:none; }
.mock-canvas{
  width:100%; height:100%; padding:20px 18px;
  display:flex; flex-direction:column;
  color:#FAFAF8; font-family:var(--font-sans);
  position:relative; overflow:hidden; border-radius:4px;
}
.mock-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .9s ease;
  display:flex; flex-direction:column;
}
.mock-slide.is-on{ opacity:1; }
.livedot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--amber); margin-right:6px;
  box-shadow:0 0 8px rgba(245,166,35,.8);
  animation:pulse 2s ease-in-out infinite;
  vertical-align:middle;
}
.mock-clock{ font-variant-numeric:tabular-nums; }
.mock--retail{ background:#141d17; padding:0; }
.rt-creative{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(9,16,12,.78) 0%, rgba(9,16,12,.52) 34%, rgba(9,16,12,.44) 58%, rgba(9,16,12,.82) 100%),
    url(../img/mock/rt-creative.webp) center/cover no-repeat;
}
.rt-copy{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:34px 16px 96px; pointer-events:none;
}
.rt-h1{
  font-size:33px; font-weight:600; text-transform:uppercase;
  line-height:1.05; letter-spacing:.02em; color:#FFFFFF;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.rt-h2{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.85); margin-top:9px;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.rt-badge2{
  margin-top:22px; width:148px; height:148px; border-radius:50%;
  background:rgba(93,127,106,.82); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.28);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 16px 40px rgba(0,0,0,.42);
}
.rt-badge2 .pct{
  font-size:44px; font-weight:600; color:#fff; line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.rt-badge2 .sub{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.95);
  margin-top:6px; line-height:1.55; padding:0 14px;
}
.rt-top{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 16px 18px;
  background:linear-gradient(180deg, rgba(9,14,10,.7) 0%, rgba(9,14,10,0) 100%);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
.rt-bottom{
  position:relative; z-index:3; margin-top:auto;
  background:linear-gradient(0deg, rgba(9,14,10,.92) 0%, rgba(9,14,10,.6) 55%, rgba(9,14,10,0) 100%);
  padding-top:24px;
}
.rt-cd{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px 9px;
}
.rt-cd__lbl{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.rt-cd__time{
  font-family:var(--font-mono); font-size:15px; color:var(--amber);
  font-weight:500; font-variant-numeric:tabular-nums;
}
.rt-ticker{
  border-top:1px solid rgba(255,255,255,.16);
  overflow:hidden; white-space:nowrap; padding:9px 0 12px;
}
.rt-ticker__inner{
  display:inline-block; white-space:nowrap;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  animation:marquee 18s linear infinite;
}
.rt-ticker__inner .sep{ color:var(--amber); margin:0 12px; }
.mock--gastro{ background:#FAF7F0; color:var(--ink); padding:0; }
.gs-board{ padding:18px 16px; background:#FAF7F0; }
.gs-promo{
  background:url(../img/mock/gs-promo.webp) center/cover no-repeat;
}
.gsp-copy{
  position:absolute; left:0; right:0; top:56%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; z-index:2; padding:0 14px;
}
.gsp-kicker{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; color:#7a4a00;
}
.gsp-head{
  font-size:23px; font-weight:600; color:#211302; letter-spacing:-.01em;
}
.gsp-sub{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:#7a4a00;
}
.gs-top{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(0,0,0,.14); padding-bottom:9px;
}
.gs-name{ font-size:16px; font-weight:400; letter-spacing:-.01em; }
.gs-clock{
  font-family:var(--font-mono); font-size:10px; color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.gs-tag{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin:9px 0 10px;
}
.gs-hero{
  position:relative; display:flex; align-items:center; gap:12px;
  background:#141414; color:#fff; border-radius:8px; padding:12px;
}
.gs-plate{
  position:relative; width:58px; height:58px; flex:none;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fff 0%, #ece7dd 58%, #d9d2c4 100%);
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.4);
}
.gs-plate__food{
  position:absolute; inset:11px; border-radius:50%;
  background:
    radial-gradient(circle at 40% 36%, #e8b64c 0%, #d29a33 44%, #a86f1f 100%);
}
.gs-plate__food::after{
  content:''; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#7d9c4b; top:9px; right:8px;
  box-shadow:-12px 8px 0 -2px #7d9c4b, -4px 14px 0 -3px #b34a2e;
}
.gs-steam{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }
.gs-steam i{
  width:2px; height:10px; border-radius:2px;
  background:rgba(255,255,255,.5); display:block;
  animation:steam 2.6s ease-in-out infinite;
}
.gs-steam i:nth-child(2){ animation-delay:.5s; height:12px; }
.gs-steam i:nth-child(3){ animation-delay:1.1s; }
.gs-hero__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gs-hero__lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber);
}
.gs-hero__name{ font-size:14.5px; font-weight:400; }
.gs-hero__sub{ font-size:9.5px; color:rgba(255,255,255,.55); }
.gs-hero__price{
  margin-left:auto; align-self:flex-end;
  font-family:var(--font-mono); font-size:13px; color:var(--amber); font-weight:500;
  white-space:nowrap;
}
.gs-menu{ display:flex; flex-direction:column; margin-top:11px; flex:1; }
.gs-item{
  display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
  font-size:11px; padding:7px 0;
  border-bottom:1px dotted rgba(0,0,0,.14);
}
.gs-item:last-child{ border-bottom:0; }
.gs-item .n{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.gs-item .n b{ font-weight:400; display:flex; align-items:center; gap:6px; }
.gs-item em{ font-style:normal; font-size:9px; color:var(--ink-mute); }
.gs-item .p{ font-weight:400; white-space:nowrap; font-variant-numeric:tabular-nums; }
.gs-chip{
  font-family:var(--font-mono); font-size:7px; letter-spacing:.12em;
  text-transform:uppercase; color:#B3541E;
  border:1px solid rgba(179,84,30,.4); border-radius:3px; padding:2px 5px;
  animation:pulse 1.8s ease-in-out infinite;
}
.gs-foot{
  margin-top:auto; padding:9px 11px;
  background:rgba(245,166,35,.14); border-radius:6px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8a6210;
  text-align:center;
}
.mock--office{
  padding:16px;
  background:
    linear-gradient(180deg, rgba(13,16,22,.8) 0%, rgba(13,16,22,.88) 55%, rgba(11,13,18,.96) 100%),
    url(../img/mock/mock--office.webp) center/cover no-repeat;
}
.of-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:9px;
}
.of-clock{ color:#fff; font-size:10px; font-variant-numeric:tabular-nums; }
.of-welcome{ margin:14px 0 12px; }
.of-lbl{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin-bottom:6px;
}
.of-name{ font-size:21px; font-weight:200; line-height:1.1; letter-spacing:-.01em; }
.of-org{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  color:rgba(255,255,255,.45); margin-top:4px;
}
.of-rooms{ display:flex; flex-direction:column; gap:5px; }
.of-room{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; font-size:10.5px; border-radius:6px;
  border:1px solid rgba(255,255,255,.09); background:rgba(13,16,22,.55);
  backdrop-filter:blur(3px);
}
.of-room .st{ width:7px; height:7px; border-radius:50%; flex:none; }
.of-room.is-busy .st{ background:#E2574C; box-shadow:0 0 7px rgba(226,87,76,.7); animation:pulse 2s ease-in-out infinite; }
.of-room.is-free .st{ background:#5FBF77; box-shadow:0 0 7px rgba(95,191,119,.6); }
.of-room.is-next .st{ background:rgba(255,255,255,.3); }
.of-room > div{ display:flex; flex-direction:column; min-width:0; }
.of-room b{ font-weight:500; color:#fff; }
.of-room i{ font-style:normal; font-size:9px; color:rgba(255,255,255,.5); }
.of-room .until{
  margin-left:auto; font-family:var(--font-mono); font-size:8.5px;
  letter-spacing:.08em; color:rgba(255,255,255,.6); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.of-room.is-busy .until{ color:var(--amber); }
.of-transit{
  margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding-top:9px;
  display:flex; flex-direction:column; gap:5px;
}
.of-transit__lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:2px;
}
.tr-row{ display:flex; align-items:center; gap:9px; font-size:10.5px; color:rgba(255,255,255,.85); }
.tr-line{
  font-family:var(--font-mono); font-size:8.5px; font-weight:600;
  padding:2px 6px; border-radius:3px; color:#0F1116; flex:none;
}
.tr-line.s3{ background:#7B5FA8; color:#fff; }
.tr-line.s1{ background:#4EA0DB; color:#fff; }
.tr-min{
  margin-left:auto; font-family:var(--font-mono); font-size:9.5px;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.mock--fitness{ padding:0; background:#0a0a0f; }
.ft-live{
  padding:16px;
  background:
    linear-gradient(180deg, rgba(8,8,14,.5) 0%, rgba(8,8,14,.72) 45%, rgba(8,8,14,.9) 100%),
    url(../img/mock/ft-live.webp) center/cover no-repeat;
  align-items:center; text-align:center;
}
.ft-promo{
  padding:18px 16px;
  background:
    linear-gradient(180deg, rgba(5,5,8,.18) 0%, rgba(5,5,8,.42) 55%, rgba(5,5,8,.92) 100%),
    url(../img/mock/ft-promo.webp) center/cover no-repeat;
  justify-content:flex-end; text-align:left;
}
.ft-promo__kicker{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber); margin-bottom:6px;
}
.ft-promo__head{
  font-size:30px; font-weight:200; line-height:1.02; letter-spacing:-.02em; color:#fff;
}
.ft-promo__cta{
  margin-top:12px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.4); border-radius:999px;
  padding:7px 12px; align-self:flex-start;
}
.ft-top{
  display:flex; justify-content:space-between; width:100%; align-items:center;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
}
.ft-clock{ font-variant-numeric:tabular-nums; }
.ft-ring{ position:relative; width:106px; height:106px; margin:10px 0 2px; }
.ft-ring svg{ width:100%; height:100%; }
.ft-ring circle.track{ stroke:rgba(255,255,255,.14); }
.ft-ring circle.fill{
  stroke:var(--amber); stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 6px rgba(245,166,35,.45));
}
.ft-ring__num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:200; letter-spacing:-.04em; color:#fff;
}
.ft-ring__num em{ font-style:normal; color:var(--amber); }
.ft-ring__lbl{
  display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.7); margin-top:2px;
}
.ft-classes{ display:flex; flex-direction:column; gap:6px; width:100%; margin-top:11px; }
.ft-cls{
  padding:7px 10px 8px; border-radius:6px;
  background:rgba(10,10,16,.55); backdrop-filter:blur(3px);
  text-align:left;
}
.ft-cls__row{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:#fff;
}
.ft-cls__cap{
  margin-left:auto; font-family:var(--font-mono); font-size:8px;
  letter-spacing:.1em; color:rgba(255,255,255,.6); text-transform:uppercase;
}
.ft-cls__cap.full{ color:#FF7A6E; }
.ft-bar{
  height:3px; border-radius:2px; background:rgba(255,255,255,.12);
  margin-top:6px; overflow:hidden;
}
.ft-bar i{
  display:block; height:100%; border-radius:2px;
  background:var(--amber); transform-origin:left;
  animation:barfill 1s var(--ease) both;
}
.ft-bar i.full{ background:#E2574C; }
.ft-next{
  margin-top:auto; width:100%;
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:6px;
  background:rgba(245,166,35,.16); border:1px solid rgba(245,166,35,.35);
  backdrop-filter:blur(3px);
}
.ft-next__lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber);
}
.ft-next__name{ font-size:10.5px; color:#fff; }
.ft-next__cd{
  margin-left:auto; font-family:var(--font-mono); font-size:9.5px;
  color:var(--amber); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mock--hospitality{
  padding:16px;
  background:
    linear-gradient(180deg, rgba(12,9,5,.55) 0%, rgba(12,9,5,.62) 45%, rgba(12,9,5,.92) 100%),
    url(../img/mock/mock--hospitality.webp) center/cover no-repeat;
}
.hp-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:9px;
}
.hp-clock{ color:#fff; font-size:10px; font-variant-numeric:tabular-nums; }
.hp-welcome{ margin:13px 0 2px; min-height:58px; }
.hp-word{
  display:block; font-size:27px; font-weight:200; letter-spacing:-.02em; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
  transition:opacity .5s ease, transform .5s ease;
}
.hp-word.is-out{ opacity:0; transform:translateY(-6px); }
.hp-sub{
  display:block; font-size:13px; color:var(--amber);
  font-weight:300; margin-top:2px; font-style:italic;
  font-family:Georgia, 'Times New Roman', serif; letter-spacing:.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.hp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px 8px; margin-top:11px; }
.hp-grid > div{ border-top:1px solid rgba(255,255,255,.22); padding-top:6px; }
.hp-lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.hp-val{ font-size:11.5px; color:#fff; margin-top:2px; display:flex; align-items:center; gap:6px; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.hp-moon{
  width:11px; height:11px; border-radius:50%; flex:none;
  background:transparent;
  box-shadow:inset -3.2px -1.5px 0 0 #E8D9A0;
  transform:rotate(-18deg);
}
.hp-event{
  margin-top:auto; padding:11px 12px; position:relative; overflow:hidden;
  background:rgba(20,14,6,.72); border-left:2px solid var(--amber);
  border-radius:0 6px 6px 0; backdrop-filter:blur(4px);
  display:flex; flex-direction:column; gap:3px;
}
.hp-event::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.09) 48%, transparent 65%);
  transform:translateX(-130%);
  animation:shine 6s ease-in-out infinite;
}
.hp-event__lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
}
.hp-event__title{ font-size:12px; color:#fff; }
.hp-event__time{
  font-family:var(--font-mono); font-size:9px; color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
}
.hp-event__next{
  border-top:1px solid rgba(255,255,255,.16); margin-top:7px; padding-top:7px;
  font-size:9.5px; color:rgba(255,255,255,.78);
}
.hp-event__next .mono-lbl{
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-right:5px;
}
.hp-foot{
  margin-top:9px; text-align:center;
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}
.mock--healthcare{ background:#F7FAF9; color:var(--ink); padding:0; }
.hc-photo{
  position:relative; height:92px; flex:none;
  background:
    linear-gradient(180deg, rgba(18,38,52,.22) 0%, rgba(14,30,42,.6) 100%),
    url(../img/mock/hc-photo.webp) center/cover no-repeat;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:10px 14px;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff;
}
.hc-clock{ font-variant-numeric:tabular-nums; }
.hc-body{
  padding:12px 16px 16px; display:flex; flex-direction:column; flex:1; min-height:0;
}
.hc-now{ text-align:center; padding:8px 0 14px; border-bottom:1px solid rgba(0,0,0,.08); }
.hc-lbl{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:7px;
}
.hc-num{
  font-size:60px; font-weight:300; letter-spacing:-.03em; line-height:1;
  color:#1E7F68; font-variant-numeric:tabular-nums;
}
.hc-num.is-flip{ animation:flipIn .6s var(--ease); }
.hc-room{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); margin-top:7px;
}
.hc-queue{ margin-top:10px; flex:1; }
.hc-q-lbl{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px;
}
.hc-q-row{
  display:flex; gap:12px; padding:5px 0;
  font-size:11.5px; color:var(--ink-soft);
  border-bottom:1px dotted rgba(0,0,0,.1);
  transition:opacity .4s ease, transform .4s ease;
}
.hc-q-row:last-child{ border-bottom:0; }
.hc-q-row .qn{
  font-family:var(--font-mono); width:34px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hc-q-row .qr{ margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase; }
.hc-foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(0,0,0,.08); padding-top:9px;
  font-family:var(--font-mono); font-size:8px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hc-foot b{ color:#1E7F68; font-weight:500; }
.mock--education{
  padding:18px 16px 0; color:#fff;
  background:
    linear-gradient(180deg, rgba(14,42,32,.78) 0%, rgba(10,32,24,.9) 100%),
    url(../img/mock/mock--education.webp) center/cover no-repeat;
}
.ed-top{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:9px; margin-bottom:10px;
}
.ed-title{ font-size:13px; font-weight:500; color:#fff; }
.ed-date{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.65); font-variant-numeric:tabular-nums;
}
.ed-table{ display:flex; flex-direction:column; gap:4px; flex:1; }
.ed-row{
  display:grid; grid-template-columns:44px 1fr auto; gap:8px; align-items:center;
  font-size:10.5px; padding:5px 8px; border-radius:4px; color:rgba(255,255,255,.92);
}
.ed-row.done{ opacity:.42; }
.ed-row.is-now{
  background:rgba(245,166,35,.2);
  border-left:2px solid var(--amber);
  position:relative;
}
.ed-row.is-now .ed-t{ font-weight:500; color:var(--amber); }
.ed-t{ font-family:var(--font-mono); color:rgba(255,255,255,.7); font-size:9.5px; font-variant-numeric:tabular-nums; }
.ed-row > span:nth-child(2){ display:flex; align-items:center; gap:6px; min-width:0; }
.ed-badge{
  font-family:var(--font-mono); font-size:6.5px; letter-spacing:.14em;
  background:var(--amber); color:#141414; border-radius:3px; padding:2px 5px;
  text-transform:uppercase; font-weight:600; flex:none;
}
.ed-r{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.6); text-align:right;
}
.ed-r.r-amber{ color:var(--amber); }
.ed-progress{
  position:absolute; left:0; bottom:0; height:2px; width:62%;
  background:var(--amber); opacity:.55; border-radius:2px;
  animation:edprog 12s linear infinite;
}
.ed-note{
  margin-top:7px; padding:8px 10px;
  background:rgba(245,166,35,.16); border-left:2px solid var(--amber);
  border-radius:0 5px 5px 0;
  display:flex; align-items:baseline; gap:7px;
  font-size:10px; color:#fff;
}
.ed-note__lbl{
  font-family:var(--font-mono); font-size:7px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber); flex:none;
}
.ed-ticker{
  margin:8px -16px 0; border-top:1px solid rgba(255,255,255,.2);
  background:rgba(8,14,11,.92); overflow:hidden; white-space:nowrap; padding:8px 0;
}
.ed-ticker__inner{
  display:inline-block; white-space:nowrap;
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.8);
  animation:marquee 22s linear infinite;
}
.ed-ticker__inner .sep{ color:var(--amber); margin:0 10px; }
.display-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; max-width:340px; margin-left:auto; margin-right:auto;
}
.display-foot .left{ display:flex; align-items:center; gap:10px; }
.display-foot .led{
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px rgba(245,166,35,.5);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
@keyframes marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes shine{
  0%, 55%{ transform:translateX(-130%); }
  85%, 100%{ transform:translateX(130%); }
}
@keyframes steam{
  0%{ transform:translateY(0) scaleY(.7); opacity:0; }
  35%{ opacity:.9; }
  100%{ transform:translateY(-9px) scaleY(1.15); opacity:0; }
}
@keyframes barfill{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
@keyframes flipIn{
  0%{ transform:translateY(14px); opacity:0; }
  60%{ transform:translateY(-3px); opacity:1; }
  100%{ transform:translateY(0); }
}
@keyframes edprog{
  from{ width:8%; }
  to{ width:92%; }
}

.display-foot .mono{
  font-family:var(--font-mono); font-weight:400; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
}
.display-foot .led{ background:var(--ink-mute); box-shadow:none; }
.hero__visual .display-stage{ width:100%; }
.subhero__mock{ margin:0; }

/* Branchen-Knöpfe unter dem Held der Startseite */
.branche-bar{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); position:relative; }
.branche-bar__inner{ display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; }
.branche-bar__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; }
.branche-chip{ cursor:pointer; font-family:var(--font-sans); min-height:40px; padding:var(--s2) var(--s4); }
.branche-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--ink-inv); }
@media (max-width:640px){ .branche-bar__inner{ gap:var(--s3); } }

/* --- Held der Unterseiten mit Grafik rechts */
.subhero__inner--photo .subhero__title{ font-size:clamp(40px, 4.8vw, 76px); hyphens:auto; -webkit-hyphens:auto; }

/* --- Übersicht der Anwendung (/funktionen) */
.shot{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:10px;
  box-shadow:0 2px 4px rgba(26,22,17,.04), 0 24px 60px -28px rgba(26,22,17,.30), 0 60px 120px -60px rgba(26,22,17,.22); }
.shot img{ display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); }
@media (max-width:640px){ .shot{ padding:6px; border-radius:var(--r); } .shot img{ border-radius:8px; } }

/* --- lumafy Screen (/geraete) */
.screen-photos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5); margin-top:var(--s7); }
.screen-photo{ margin:0; padding:var(--s5); border-radius:var(--r-lg); background:linear-gradient(135deg, #1A1611 0%, #2B261F 100%); }
.screen-photo img{ display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 24px 48px -24px rgba(0,0,0,.6); }
.screen-photos__cap{ grid-column:1 / -1; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-mute); text-align:center; }
@media (max-width:760px){ .screen-photos{ grid-template-columns:1fr; } .screen-photo{ padding:var(--s4); } }

/* --- Ansprechpartner (/kontakt) */
.team{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s5); max-width:760px; }
.member{ margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); }
.member__photo{ aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:var(--ink); margin-bottom:var(--s3); }
.member__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.member__role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.member__name{ font-size:22px; font-weight:300; letter-spacing:-.01em; }
@media (max-width:640px){ .team{ grid-template-columns:1fr; max-width:420px; } }

/* --- Europa-Grafik (/sicherheit) */
.eu-flag{ margin:0 auto; width:100%; max-width:280px; aspect-ratio:1; border-radius:50%; background:#0A3D8F; position:relative;
  display:flex; align-items:center; justify-content:center; box-shadow:0 30px 60px -20px rgba(26,22,17,.45); }
.eu-flag::before{ content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%); }
.eu-flag svg{ width:60%; position:relative; }
@media (max-width:1000px){ .eu-flag{ max-width:200px; margin:0; } }

/* --- Kleine Funktionsgrafiken (/funktionen), in den neuen Farben */
.fv{ margin-top:var(--s5); height:120px; border-radius:var(--r); background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.fv-template{ width:78%; height:76%; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:4px; }
.fv-template i{ background:var(--ink); border-radius:3px; }
.fv-template i:nth-child(1){ grid-column:1 / 3; background:linear-gradient(135deg, var(--line-strong), var(--line)); }
.fv-template i:nth-child(2){ grid-column:3 / 4; grid-row:1 / 3; }
.fv-template i:nth-child(4){ background:var(--line-strong); }
.fv-cal{ display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:1fr 1fr; gap:3px; width:78%; height:76px; }
.fv-cal i{ background:rgba(26,22,17,.05); border-radius:2px; }
.fv-cal i.soft{ background:var(--line); }
.fv-cal i.on{ background:var(--ink-soft); }
.fv-clock{ width:80px; height:80px; border-radius:50%; border:2px solid var(--ink); position:relative; }
.fv-clock::before{ content:""; position:absolute; left:50%; top:50%; width:2px; height:30px; background:var(--ink);
  transform:translate(-50%,-100%) rotate(45deg); transform-origin:bottom; animation:fv-tick 6s linear infinite; }
.fv-clock::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:var(--ink); transform:translate(-50%,-50%); }
@keyframes fv-tick{ to{ transform:translate(-50%,-100%) rotate(405deg); } }
.fv-shield{ width:64px; height:80px; position:relative; background:var(--ink); clip-path:polygon(50% 0%, 100% 22%, 100% 60%, 50% 100%, 0% 60%, 0% 22%); }
.fv-shield::after{ content:""; position:absolute; left:50%; top:44%; width:22px; height:11px; border-left:2px solid var(--ink-inv); border-bottom:2px solid var(--ink-inv);
  transform:translate(-50%,-50%) rotate(-45deg); }
.fv-multi{ display:flex; gap:6px; align-items:flex-end; justify-content:center; }
.fv-multi i{ display:block; width:24px; aspect-ratio:9/16; background:var(--ink); border-radius:2px; position:relative; }
.fv-multi i.med{ width:32px; aspect-ratio:10/14; }
.fv-multi i.big{ width:42px; aspect-ratio:16/10; }
.fv-multi i::after{ content:""; position:absolute; inset:3px; border-radius:1px; background:linear-gradient(135deg, rgba(154,143,124,.75), transparent); }
@media (max-width:1000px){ .fv{ max-width:420px; } }

/* Bewegung reduzieren: Laufbänder, Uhren und Wechsel stehen still */
@media (prefers-reduced-motion:reduce){
  .display-stage *, .display-stage *::before, .display-stage *::after, .fv *, .fv *::before, .fv *::after{ animation:none !important; }
}
.member figcaption{ display:flex; flex-direction:column; gap:var(--s2); }