/* generated — не редактировать; источник: styles.css :root + tools/seo/seo-template.css */
@font-face{font-family:'DM Serif Display';src:url('/assets/fonts/dmserif-normal-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-normal-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/assets/fonts/spacemono-normal-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root {
  /* --- Base canvas (near-black to true black) --- */
  --black-true: #000000;   /* hero void */
  --black-base: #0A0A0A;   /* page background */
  --black-900:  #0F0F0F;
  --surface-1:  #141414;   /* cards, lifted from base */
  --surface-2:  #1A1A1A;   /* nested / hover surface */
  --surface-3:  #202020;   /* inputs, wells */

  /* --- Ember orange accent (spotlight, never a fill) --- */
  --ember-700: #C7400F;
  --ember-600: #E04A18;
  --ember:     #FF5A1F;     /* PRIMARY accent — vivid */
  --ember-400: #FF7A3C;     /* warmer support tone */
  --ember-300: #FF9966;
  --ember-200: #FFB991;

  /* --- Warm off-white text --- */
  --paper:      #F5F5F0;    /* text primary, warm off-white */
  --paper-dim:  #C9C9C2;
  --ash:        #8A8A85;    /* text muted */
  --ash-dim:    #8A8A85;    /* faint text — светлее прежнего #5C5C58 ради контраста WCAG AA на тёмном фоне */

  /* --- Borders & lines --- */
  --line:        #262626;   /* default 1px hairline (decorative dividers) */
  --line-soft:   #1E1E1E;
  --line-strong: #333330;
  --line-input:  #333330;   /* control edge — matches the prototype's --line-strong */

  /* --- Royal red — the ISOLATED third accent (König canon) ---
     Red and orange are neighbours; touching they look amateur. Red is used
     ONLY in its own black-surrounded zone (crest, "Der Neue Fritz" panel,
     a single divider/number) and NEVER beside ember in the same block.
     --red passes WCAG AA on #000/#0A0A0A only — keep red text on those zones.
     --red-cloak is a deep crimson for LARGE isolated fills/imagery — never text. */
  --red:        #E5484D;
  --red-600:    #C5343C;
  --red-cloak:  #8E1A28;    /* background / imagery only — never `color:` */
  --red-glow:        rgba(229, 72, 77, 0.40);
  --red-glow-soft:   rgba(229, 72, 77, 0.14);

  /* --- Heraldic gold (subconscious schwarz-rot-gold, not a literal flag) ---
     Used twice only: the hero heraldic tick + a hairline on the footer crest. */
  --gold:       #D9A441;

  /* --- Glow / ambient --- */
  --ember-glow:      rgba(255, 90, 31, 0.45);
  --ember-glow-soft: rgba(255, 90, 31, 0.16);
  --ember-haze:      rgba(255, 122, 60, 0.08);

  /* --- Semantic aliases --- */
  --bg:            var(--black-base);
  --text-on-ember: #1A0A03;        /* near-black text on orange fills */

  /* feedback (warm, on-brand; cooled slightly so error-red ≠ royal-red) */
  --success: #5BBF7A;
  --warning: #FFB020;
  --danger:  #F2555A;

  /* --- Type --- */
  --font-display: 'DM Serif Display', 'Georgia', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --t-d2:     clamp(2rem, 4vw, 3.25rem);
  --t-lead:   clamp(1.125rem, 1.4vw, 1.375rem);
  --t-body:   1rem;
  --t-kicker: 0.78rem;
  --ls-tight: -0.015em;
  --ls-kicker: 0.22em;

  /* --- Spacing & layout --- */
  --sp-2: 0.5rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  --sp-section: clamp(4rem, 10vw, 9rem);
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --bento-gap: clamp(0.75rem, 1.2vw, 1.25rem);

  /* --- Radii --- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* --- Shadows / glows --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.65);
  --glow-sm:  0 0 0 1px var(--ember-glow-soft), 0 6px 22px -6px var(--ember-glow);
  --glow-md:  0 0 40px -6px var(--ember-glow);
  --glow-lg:  0 0 90px -10px var(--ember-glow);
  --glow-text: 0 0 32px rgba(255,90,31,0.35);   /* hero headline ember halo */

  /* --- Gradients --- */
  --grad-ember-radial:
    radial-gradient(60% 55% at 50% 38%, rgba(255,90,31,0.28) 0%, rgba(255,90,31,0.10) 32%, rgba(255,90,31,0) 68%);
  --grad-ember-fill:
    linear-gradient(135deg, var(--ember-400) 0%, var(--ember) 55%, var(--ember-600) 100%);
  --grad-surface-sheen:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 40%);

  /* --- Blur (glass nav) --- */
  --blur-nav: blur(16px) saturate(120%);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ember:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-reveal: 760ms;
}
/* SEO-подстраницы: лёгкий слой на токенах главной (:root подставляется генератором) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black-base);color:var(--paper-dim);font:400 17px/1.65 'Inter',system-ui,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--ember);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;color:var(--paper);font-weight:400;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.15rem}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ember);color:#000;padding:10px 16px;z-index:99}
.skip-link:focus{left:12px}
/* nav */
.s-nav{border-bottom:1px solid var(--line);background:rgba(10,10,10,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.s-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.s-logo{font-family:'DM Serif Display',Georgia,serif;font-size:1.15rem;color:var(--paper)}
.s-logo span{color:var(--ember)}
.s-nav nav{display:flex;gap:22px;align-items:center}
.s-nav nav a{color:var(--paper-dim);font-size:.95rem}
.s-cta{border:1px solid var(--ember);border-radius:4px;padding:8px 16px;color:var(--ember)!important}
.s-cta:hover{background:var(--ember);color:#000!important;text-decoration:none}
/* crumbs, hero */
.s-crumbs{padding:18px 24px 0;max-width:1080px;margin:0 auto;font-family:'Space Mono',monospace;font-size:.78rem;color:var(--ash)}
.s-crumbs a{color:var(--ash)}
.s-hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--black-true),var(--black-base))}
.s-kicker{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin:0 0 14px}
.s-intro{font-size:1.12rem;max-width:720px;color:var(--paper-dim)}
.s-royal{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-size:1.25rem;color:var(--paper);margin:18px 0 0}
.s-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.s-chips span{border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-family:'Space Mono',monospace;font-size:.75rem;color:var(--paper-dim)}
.s-heroact{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.s-btn{display:inline-block;background:var(--ember);color:#000;border:1px solid var(--ember);border-radius:4px;padding:12px 26px;font:600 .95rem 'Inter',sans-serif;cursor:pointer}
.s-btn:hover{background:var(--ember-400);text-decoration:none}
.s-btn.ghost{background:transparent;color:var(--ember)}
.s-btn.ghost:hover{background:var(--ember);color:#000}
/* sections */
.s-sec{padding:40px 0;border-top:1px solid var(--line-soft)}
.s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.s-card{background:var(--surface-1);border:1px solid var(--line);border-radius:8px;padding:20px}
.s-card p{margin:.4em 0 0;font-size:.95rem;color:var(--ash)}
.s-card.link{display:block;color:inherit}
.s-card.link:hover{border-color:var(--ember);text-decoration:none}
.s-prose p{max-width:760px}
.s-list{max-width:760px;padding-left:20px}
.s-list li{margin:6px 0}
.s-links{display:flex;flex-wrap:wrap;gap:12px 22px}
.s-sub{color:var(--ash);max-width:640px}
/* фотографии: снимки вертикальные (9:16), поэтому колонка ограничена по ширине —
   иначе картинка 540 px растянулась бы на всю строку и стала мыльной */
.s-photos{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.s-photos figure{margin:0;flex:1 1 220px;max-width:300px}
.s-photos img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;background:var(--surface-1)}
.s-photos figcaption{margin-top:8px;font-size:.8rem;color:var(--ash-dim)}
/* калькулятор цены */
.calc { max-width: 820px; margin-top: 22px; }
.calc-group { border: 0; padding: 0; margin: 0 0 22px; }
.calc-group legend { padding: 0; margin-bottom: 10px; font-size: .9rem; color: var(--paper-dim, #C9C9C2); }
.calc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.calc-opt { position: relative; }
.calc-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.calc-opt__box {
  display: block; border: 1px solid var(--line, #262626); border-radius: 8px;
  background: var(--surface-1, #141414); padding: 12px 18px; cursor: pointer;
  color: var(--paper-dim, #C9C9C2); line-height: 1.35; transition: border-color .15s, color .15s;
}
.calc-opt__box b { display: block; color: var(--paper, #F5F5F0); font-size: .98rem; }
.calc-opt__box i { font-style: normal; font-size: .82rem; color: var(--ash, #8A8A85); }
.calc-opt--day .calc-opt__box { min-width: 56px; text-align: center; font-family: var(--font-mono, monospace); }
.calc-opt input:hover + .calc-opt__box { border-color: var(--line-strong, #3A3A3A); }
.calc-opt input:checked + .calc-opt__box { border-color: var(--ember, #FF5A1F); color: var(--paper, #F5F5F0); }
.calc-opt input:focus-visible + .calc-opt__box { outline: 2px solid var(--ember, #FF5A1F); outline-offset: 2px; }
.calc-out { border: 1px solid var(--line, #262626); border-radius: 10px; padding: 22px; background: var(--surface-1, #141414); }
.calc-out__label { margin: 0; font-family: var(--font-mono, monospace); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ash, #8A8A85); }
.calc-out__sum { margin: 6px 0 0; font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1; color: var(--paper, #F5F5F0); }
.calc-out__vat { font-family: var(--font-sans, sans-serif); font-size: .85rem; color: var(--ash, #8A8A85); }
.calc-out__per { margin: 8px 0 0; font-size: .9rem; color: var(--ember-300, #FF8A5B); }
.calc-out__inc { margin: 14px 0 0; font-size: .88rem; color: var(--ash, #8A8A85); }
.calc-out .s-btn { margin-top: 18px; }
.calc-note { margin: 16px 0 0; font-size: .82rem; line-height: 1.55; color: var(--ash-dim, #6E6E69); max-width: 760px; }
/* faq */
.s-faq{border:1px solid var(--line);border-radius:8px;background:var(--surface-1);margin:10px 0;max-width:820px}
.s-faq summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--paper)}
.s-faq p{margin:0;padding:0 20px 16px;color:var(--ash)}
/* form */
.lead-form{max-width:640px;display:grid;gap:14px;margin-top:18px}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form label{display:grid;gap:6px;font-size:.85rem;color:var(--paper-dim)}
.lead-form input,.lead-form textarea{background:var(--surface-3);border:1px solid var(--line-input);border-radius:4px;color:var(--paper);padding:11px 12px;font:inherit;font-size:.95rem}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--ember);outline-offset:1px}
.form-note{min-height:1.2em;font-size:.9rem;color:var(--ember-300)}
.s-alt{margin-top:18px;font-size:.92rem;color:var(--ash)}
/* footer */
.s-footer{border-top:1px solid var(--line);margin-top:48px;padding:40px 0 28px;background:var(--black-900)}
.s-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.s-footer h4{font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin:0 0 10px}
.s-footer ul{list-style:none;margin:0 0 18px;padding:0}
.s-footer li{margin:5px 0}
.s-footer a{color:var(--paper-dim);font-size:.9rem}
.s-footer .ai{border:1px solid var(--line);border-radius:8px;padding:14px 18px;font-size:.85rem;color:var(--ash);margin-top:28px}
.s-footer .ai strong{color:var(--paper)}
.s-footer .fine{font-size:.78rem;color:var(--ash-dim);margin:10px 0 0}
/* legal pages (Impressum/Datenschutz/Barrierefreiheit) */
.s-legal{max-width:820px}
.s-legal .lead{color:var(--paper-dim);font-size:1.05rem;margin:0 0 24px}
.s-legal h3{font-family:'DM Serif Display',Georgia,serif;font-size:1.25rem;color:var(--paper);margin:28px 0 8px}
.s-legal address{font-style:normal;color:var(--paper-dim);line-height:1.7;margin:0 0 8px}
.s-legal p{color:var(--ash);margin:0 0 12px}
.s-legal ul{color:var(--ash);padding-left:20px;margin:0 0 12px}
.s-legal li{margin:5px 0}
.s-legal a{color:var(--ember);word-break:break-word}
.s-legal .ph{background:var(--surface-3);border:1px dashed var(--line-strong);border-radius:4px;padding:1px 6px;color:var(--paper-dim);font-size:.9em}
/* article prose (blog) */
article.s-sec .s-prose h2{margin:32px 0 10px}
article.s-sec .s-prose p{max-width:720px}
/* floating WhatsApp button */
.s-wa{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#0A0A0A;border-radius:999px;padding:12px 16px;font:600 .9rem 'Inter',sans-serif;
  box-shadow:0 6px 20px rgba(0,0,0,.4);text-decoration:none}
.s-wa:hover{background:#1ebe57;text-decoration:none}
.s-wa span{white-space:nowrap}
@media(max-width:640px){
  .lead-form .row{grid-template-columns:1fr}
  /* На телефоне прячем только «Kontakt» (дублируется CTA), а Einsatzorte/Preise/Magazin
     оставляем — иначе с мобильного не попасть в SEO-разделы из шапки. */
  .s-nav nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .s-nav nav a{font-size:.82rem}
  .s-nav nav a[href="#anfrage"]:not(.s-cta){display:none}
  /* Разделов стало семь — на телефоне шапка расползалась на три строки и съедала
     четверть экрана. Videos и Referenzen там прячем: до них ведут подвал,
     перелинковка и блоки внутри страниц. Einsatzorte/Preise/Praxiswissen/Magazin
     остаются — это входы в основные разделы. */
  .s-nav nav a[href="/videos/"],
  .s-nav nav a[href="/referenzen/"]{display:none}
  .s-logo span{display:none}
  .s-wa span{display:none}.s-wa{padding:14px;right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* cookie-баннер подстраниц (появляется только если задан Clarity-ID) */
.ck-sub{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:640px;margin:0 auto;
  background:var(--surface-1,#141414);border:1px solid var(--line,#262626);border-radius:14px;
  padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.ck-sub p{margin:0 0 12px;font-size:.9rem;color:var(--ash,#c9c9c2)}
.ck-sub a{color:var(--ember,#FF5A1F)}
.ck-sub-act{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ck-sub-act button{flex:1;min-width:140px;padding:11px 16px;border-radius:10px;font:inherit;font-size:.9rem;
  cursor:pointer;border:1px solid var(--line-strong,#333);background:transparent;color:var(--paper,#f5f5f0)}
.ck-sub-act button[data-a=yes]{background:var(--ember,#FF5A1F);border-color:var(--ember,#FF5A1F);color:#1a0d05}

/* Сквозной список всех городов. Стоит на каждой странице города и услуги:
   без него у 28 городов было по одной входящей ссылке и Google их не индексировал.
   Набран мелко и в несколько колонок — это навигация, а не контент. */
.s-allcities h2 { font-size: 1.05rem; margin-bottom: .9rem; }
.s-cityfold summary { cursor: pointer; color: var(--ash, #8A8A85); font-size: .9rem; padding: 6px 0; }
.s-cityfold summary:hover { color: var(--ember, #FF5A1F); }
.s-cityfold[open] summary { margin-bottom: .6rem; }
.s-citygrid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .35rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  font-size: .875rem;
}
.s-citygrid li { line-height: 1.5; }
.s-citygrid a { color: var(--ash, #8A8A85); text-decoration: none; }
.s-citygrid a:hover, .s-citygrid a:focus-visible { color: var(--ember, #FF5A1F); text-decoration: underline; }
.s-citygrid span[aria-current] { color: var(--paper-dim, #C9C9C2); }

/* --- страницы-просмотра видео (/videos/…) ---------------------------------
   Ролики вертикальные 9:16. Плеер стоит сразу под H1 и ограничен по ширине,
   иначе на десктопе он занимает весь экран и текст уезжает ниже сгиба.
   Google индексирует видео только там, где оно — главный контент страницы. */
.s-hero--video { padding-bottom: 0; }
.s-videowrap { padding: 22px 0 6px; }
.s-video {
  display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto;
  aspect-ratio: 9 / 16; background: #000;
  border: 1px solid var(--line, #262626); border-radius: 12px;
}
.s-videometa {
  margin: 12px auto 0; text-align: center;
  font-size: .82rem; color: var(--ash-dim, #8A8A85);
}
.s-vgrid {
  display: grid; gap: 16px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.s-vcard {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  color: inherit; border: 1px solid var(--line, #262626); border-radius: 12px;
  padding: 10px; background: var(--surface-1, #141414);
}
.s-vcard:hover, .s-vcard:focus-visible { border-color: var(--ember, #FF5A1F); }
.s-vcard img { width: 100%; height: auto; display: block; border-radius: 8px; }
.s-vcard__t { font-size: .9rem; line-height: 1.35; }
.s-vcard__d { font-size: .78rem; color: var(--ash-dim, #8A8A85); }

/* --- таблица характеристик и шаги (страницы услуг) ------------------------- */
.s-tablewrap { overflow-x: auto; margin-top: 18px; }
.s-specs { width: 100%; border-collapse: collapse; font-size: .92rem; }
.s-specs th, .s-specs td {
  text-align: left; vertical-align: top; padding: 11px 14px;
  border-bottom: 1px solid var(--line, #262626);
}
.s-specs th {
  width: 34%; min-width: 150px; font-weight: 500;
  color: var(--paper-dim, #C9C9C2); white-space: normal;
}
.s-specs td { color: var(--ash, #8A8A85); }
.s-specs tr:last-child th, .s-specs tr:last-child td { border-bottom: 0; }
.s-steps {
  counter-reset: step; list-style: none; padding: 0;
  margin: 18px 0 0; display: grid; gap: 14px;
}
.s-steps li {
  counter-increment: step; display: grid; gap: 4px;
  padding-left: 46px; position: relative;
}
.s-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--ember, #FF5A1F); border-radius: 50%;
  color: var(--ember, #FF5A1F); font-size: .85rem;
}
.s-steps strong { font-weight: 500; }
.s-steps span { color: var(--ash, #8A8A85); font-size: .93rem; line-height: 1.55; }