/*
  Berta — Marketing-Website
  =========================
  Aufbau:
    1. @font-face (lokale IBM Plex .ttf, SIL OFL)
    2. Design-Tokens (aus Berta Design System übernommen)
    3. Base / Reset
    4. Typografie-Mixins
    5. Layout (container, sections, grids)
    6. Komponenten (nav, button, card, table, badge, footer, form, diagram)
  Light mode only (Auftrag).
*/

/* ─── 1. FONTS ──────────────────────────────────────────────────── */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/IBMPlexSans-Regular.ttf')  format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/IBMPlexSans-Medium.ttf')   format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/IBMPlexSans-Italic.ttf')   format('truetype'); }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/IBMPlexSerif-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Serif'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/IBMPlexSerif-Medium.ttf')  format('truetype'); }
@font-face { font-family:'IBM Plex Serif'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/IBMPlexSerif-Italic.ttf')  format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/IBMPlexMono-Medium.ttf')  format('truetype'); }

/* ─── 2. TOKENS ─────────────────────────────────────────────────── */
:root {
  --berta-tinte:#1B2430; --berta-tinte-soft:#36404D; --berta-tinte-mute:#6B7280;
  --berta-papier:#FAF7F2; --berta-papier-raised:#FFFFFF;
  --berta-akt:#3F6B47; --berta-akt-soft:#5A8A63; --berta-akt-bg:#E1EAE3; --berta-akt-ink:#2A4A30;
  --berta-linie:#E3DDD0; --berta-linie-strong:#C9C2B0;

  --bg-page:var(--berta-papier); --bg-raised:var(--berta-papier-raised); --bg-sunken:#F4F0E8;
  --bg-hover:rgba(27,36,48,0.04); --bg-active:rgba(27,36,48,0.08); --bg-overlay:rgba(19,23,28,0.55);
  --fg-default:var(--berta-tinte); --fg-soft:var(--berta-tinte-soft); --fg-mute:var(--berta-tinte-mute);
  --fg-on-accent:var(--berta-papier); --fg-on-primary:var(--berta-papier);
  --border-default:var(--berta-linie); --border-strong:var(--berta-linie-strong); --border-focus:var(--berta-tinte);

  --color-success:#1E7A4D; --color-success-bg:#D8EDDF;
  --color-warning:#B47A1C; --color-warning-bg:#F6EBD3;
  --color-error:#B33A2C;   --color-error-bg:#F4D9D3;
  --color-info:#3F6B85;    --color-info-bg:#DEEAF0;

  --font-sans:'IBM Plex Sans','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --font-serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600;

  --text-display:2.5rem;   --leading-display:1.15;
  --text-h1:1.75rem;       --leading-h1:1.25;
  --text-h2:1.375rem;      --leading-h2:1.30;
  --text-h3:1.125rem;      --leading-h3:1.35;
  --text-body:0.9375rem;   --leading-body:1.55;
  --text-small:0.8125rem;  --leading-small:1.50;
  --text-micro:0.6875rem;  --leading-micro:1.45;
  --text-mono:0.8125rem;   --leading-mono:1.55;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.04em;

  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-16:4rem; --space-24:6rem;

  --radius-xs:2px; --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-full:9999px;
  --shadow-xs:0 1px 0 rgba(27,36,48,0.04);
  --shadow-sm:0 2px 6px rgba(27,36,48,0.06),0 1px 2px rgba(27,36,48,0.04);
  --shadow-md:0 8px 24px rgba(27,36,48,0.12),0 2px 6px rgba(27,36,48,0.06);

  --ease-out:cubic-bezier(0.2,0,0,1); --ease-inout:cubic-bezier(0.4,0,0.2,1);
  --duration-fast:120ms; --duration-normal:180ms; --duration-slow:240ms;

  /* layout */
  --maxw:1140px;        /* site container */
  --maxw-read:680px;    /* reading column */
  --nav-h:64px;
}

/* ─── 3. BASE ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0; background:var(--bg-page); color:var(--fg-default);
  font-family:var(--font-sans); font-size:var(--text-body); line-height:var(--leading-body);
  font-weight:var(--weight-regular);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" on,"cv11" on;
}
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--berta-akt-bg); color:var(--fg-default); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--berta-linie-strong); border-radius:var(--radius-full); border:2px solid var(--bg-page); }
*::-webkit-scrollbar-thumb:hover{ background:var(--berta-tinte-mute); }

/* ─── 4. TYPE ───────────────────────────────────────────────────── */
.t-display{ font-family:var(--font-serif); font-size:var(--text-display); line-height:var(--leading-display); font-weight:var(--weight-medium); letter-spacing:var(--tracking-tight); margin:0; }
h1,.t-h1{ font-family:var(--font-sans); font-size:var(--text-h1); line-height:var(--leading-h1); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); margin:0; }
h2,.t-h2{ font-family:var(--font-sans); font-size:var(--text-h2); line-height:var(--leading-h2); font-weight:var(--weight-semibold); margin:0; }
h3,.t-h3{ font-family:var(--font-sans); font-size:var(--text-h3); line-height:var(--leading-h3); font-weight:var(--weight-medium); margin:0; }
p{ margin:0; }
.t-small{ font-size:var(--text-small); line-height:var(--leading-small); color:var(--fg-soft); }
.t-micro{ font-size:var(--text-micro); line-height:var(--leading-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-mute); font-weight:var(--weight-medium); }
.t-mute{ color:var(--fg-mute); }
.t-soft{ color:var(--fg-soft); }
code,kbd,.t-mono{ font-family:var(--font-mono); font-size:var(--text-mono); line-height:var(--leading-mono); }
.serif{ font-family:var(--font-serif); }
a{ color:var(--fg-default); text-decoration:underline; text-decoration-color:var(--berta-akt); text-decoration-thickness:1px; text-underline-offset:2px; transition:text-decoration-color var(--duration-fast) var(--ease-out); }
a:hover{ text-decoration-thickness:2px; }
.lead{ font-size:1.0625rem; line-height:1.6; color:var(--fg-soft); text-wrap:pretty; }

/* eyebrow label with moss square */
.eyebrow{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--berta-akt); font-weight:var(--weight-semibold); }
.eyebrow::before{ content:""; width:8px; height:8px; background:var(--berta-akt); flex:0 0 auto; }

/* ─── 5. LAYOUT ─────────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--space-6); }
.section{ padding-block:var(--space-24); border-top:1px solid var(--berta-linie); }
.section--tight{ padding-block:var(--space-16); }
.section--flush{ border-top:none; }
.section--sunken{ background:var(--bg-sunken); }
.read{ max-width:var(--maxw-read); }
.stack > * + *{ margin-top:var(--space-4); }
.grid{ display:grid; gap:var(--space-6); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.section-head{ max-width:760px; }
.section-head .eyebrow{ margin-bottom:var(--space-4); }
.section-head h2{ margin-bottom:var(--space-4); text-wrap:balance; }

/* ─── 6. NAV ────────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:30; background:rgba(250,247,242,0.92); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid var(--berta-linie); }
.nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:var(--space-6); }
.brand{ display:inline-flex; align-items:center; gap:var(--space-2); text-decoration:none; flex:0 0 auto; }
.brand:hover{ text-decoration:none; }
.brand-mark{ width:13px; height:13px; background:var(--berta-akt); flex:0 0 auto; }
.brand-word{ font-size:1.25rem; font-weight:500; letter-spacing:-0.01em; color:var(--berta-tinte); }
.nav-links{ display:flex; align-items:center; gap:var(--space-1); margin-left:auto; }
.nav-link{ font-size:var(--text-small); font-weight:500; color:var(--fg-soft); text-decoration:none; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out); }
.nav-link:hover{ text-decoration:none; background:var(--bg-hover); color:var(--fg-default); }
.nav-link.is-active{ color:var(--berta-tinte); background:var(--bg-active); }
.nav-cta{ margin-left:var(--space-3); }
.nav-toggle{ display:none; }

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn{ font-family:var(--font-sans); font-size:var(--text-small); font-weight:500; line-height:1;
  border-radius:var(--radius-sm); padding:11px 16px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out); }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:scale(0.99); }
.btn:focus-visible{ outline:2px solid var(--berta-akt); outline-offset:2px; }
.btn-primary{ background:var(--berta-tinte); color:var(--fg-on-primary); }
.btn-primary:hover{ background:#2A3441; }
.btn-accent{ background:var(--berta-akt); color:var(--fg-on-accent); }
.btn-accent:hover{ background:var(--berta-akt-soft); }
.btn-secondary{ background:transparent; color:var(--berta-tinte); border-color:var(--berta-linie-strong); }
.btn-secondary:hover{ background:var(--bg-hover); border-color:var(--berta-tinte-mute); }
.btn-ghost{ background:transparent; color:var(--berta-tinte); padding-inline:var(--space-2); }
.btn-ghost:hover{ background:var(--bg-hover); }
.btn-lg{ padding:13px 20px; font-size:var(--text-body); }
.btn .ico{ width:16px; height:16px; }

/* ─── ICON ──────────────────────────────────────────────────────── */
.ico{ stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

/* ─── CARD ──────────────────────────────────────────────────────── */
.card{ background:var(--bg-raised); border:1px solid var(--berta-linie); border-radius:var(--radius-md); padding:var(--space-6); }
.card--sunken{ background:transparent; }
.card-icon{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--berta-linie); border-radius:var(--radius-sm); color:var(--berta-akt); margin-bottom:var(--space-5); }
.card-icon .ico{ width:20px; height:20px; }
.card h3{ margin-bottom:var(--space-2); }
.card-num{ font-family:var(--font-mono); font-size:var(--text-small); color:var(--berta-akt); margin-bottom:var(--space-4); }

/* feature list */
.flist{ list-style:none; padding:0; margin:0; }
.flist li{ display:flex; gap:var(--space-3); padding-block:var(--space-3); border-top:1px solid var(--berta-linie); }
.flist li:first-child{ border-top:none; }
.flist .ico{ width:18px; height:18px; color:var(--berta-akt); margin-top:2px; }
.flist b{ font-weight:600; }

/* ─── COMPARE TABLE ─────────────────────────────────────────────── */
.compare{ width:100%; border-collapse:collapse; border:1px solid var(--berta-linie); border-radius:var(--radius-md); overflow:hidden; }
.compare th,.compare td{ text-align:left; padding:var(--space-4) var(--space-5); border-top:1px solid var(--berta-linie); vertical-align:top; font-size:var(--text-body); }
.compare thead th{ border-top:none; font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-mute); font-weight:600; background:var(--bg-sunken); }
.compare thead th.col-berta{ color:var(--berta-akt); }
.compare td.col-old{ color:var(--fg-soft); width:42%; }
.compare td.col-berta{ width:42%; font-weight:500; }
.compare td.col-berta b{ font-weight:600; }
.compare tbody tr:hover{ background:var(--bg-hover); }
.compare .col-berta-cell{ background:rgba(225,234,227,0.35); }

/* ─── BADGE ─────────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; font-weight:600; padding:4px 9px; border-radius:var(--radius-full); border:1px solid var(--berta-linie); color:var(--fg-soft); background:var(--bg-raised); }
.badge--accent{ color:var(--berta-akt-ink); background:var(--berta-akt-bg); border-color:transparent; }
.badge--plan{ color:var(--color-warning); background:var(--color-warning-bg); border-color:transparent; }

/* ─── PHOTO / DIAGRAM PLACEHOLDERS ──────────────────────────────── */
.ph{ position:relative; background:var(--bg-sunken); border:1px solid var(--berta-linie); border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); color:var(--fg-mute); text-align:center; padding:var(--space-8);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(27,36,48,0.025) 11px,rgba(27,36,48,0.025) 12px); }
.ph .ico{ width:32px; height:32px; color:var(--berta-linie-strong); }
.ph-label{ font-size:var(--text-small); font-weight:500; color:var(--fg-soft); }
.ph-sub{ font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-mute); }

/* ─── PRICING ───────────────────────────────────────────────────── */
.price-amount{ font-family:var(--font-serif); font-size:2.25rem; font-weight:500; letter-spacing:-0.01em; line-height:1; }
.price-unit{ font-size:var(--text-small); color:var(--fg-mute); }
.price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); padding-block:var(--space-3); border-top:1px solid var(--berta-linie); }
.price-row:first-of-type{ border-top:none; }
.calc{ background:var(--bg-sunken); border:1px solid var(--berta-linie); border-radius:var(--radius-sm); padding:var(--space-5); }
.calc-row{ display:flex; justify-content:space-between; align-items:baseline; padding-block:var(--space-2); }
.calc-row + .calc-row{ border-top:1px dashed var(--berta-linie); }
.calc-row .mono{ font-family:var(--font-mono); }

/* ─── FAQ (accordion via <details>) ─────────────────────────────── */
.faq{ border-top:1px solid var(--berta-linie); }
.faq details{ border-bottom:1px solid var(--berta-linie); }
.faq summary{ cursor:pointer; list-style:none; padding:var(--space-5) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-weight:500; font-size:var(--text-h3); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ico{ width:18px; height:18px; color:var(--berta-akt); transition:transform var(--duration-normal) var(--ease-out); flex:0 0 auto; }
.faq details[open] summary .ico{ transform:rotate(45deg); }
.faq .faq-body{ padding:0 0 var(--space-5); max-width:var(--maxw-read); color:var(--fg-soft); }

/* ─── FORM ──────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field label{ font-size:var(--text-small); font-weight:500; color:var(--fg-soft); }
.field label .opt{ color:var(--fg-mute); font-weight:400; }
.input,.textarea,.select{ font-family:var(--font-sans); font-size:var(--text-body); color:var(--fg-default); background:var(--bg-raised);
  border:1px solid var(--berta-linie-strong); border-radius:var(--radius-sm); padding:11px 13px; width:100%; transition:border-color var(--duration-fast) var(--ease-out); }
.input:focus,.textarea:focus,.select:focus{ outline:2px solid var(--berta-akt); outline-offset:1px; border-color:transparent; }
.textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:40px; }

/* ─── ARCHITECTURE DIAGRAM ──────────────────────────────────────── */
.arch{ border:1px solid var(--berta-linie); border-radius:var(--radius-md); background:var(--bg-raised); padding:var(--space-8); }
.arch-house{ border:1.5px solid var(--berta-tinte); border-radius:var(--radius-sm); padding:var(--space-5); background:var(--berta-papier); position:relative; }
.arch-house::before{ content:"Ihr Büro"; position:absolute; top:-10px; left:var(--space-5); background:var(--bg-raised); padding:0 var(--space-2); font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; font-weight:600; color:var(--berta-tinte); }
.arch-layer{ border:1px solid var(--berta-linie); border-radius:var(--radius-sm); background:var(--bg-raised); padding:var(--space-3) var(--space-4); display:flex; align-items:center; gap:var(--space-3); }
.arch-layer.is-engine{ border-color:var(--berta-akt); background:var(--berta-akt-bg); }
.arch-layer .lyr-num{ font-family:var(--font-mono); font-size:var(--text-micro); color:var(--fg-mute); flex:0 0 auto; }
.arch-layer .lyr-name{ font-weight:600; font-size:var(--text-small); }
.arch-layer .lyr-desc{ font-size:var(--text-small); color:var(--fg-soft); margin-left:auto; text-align:right; }
.arch-flow{ text-align:center; color:var(--berta-linie-strong); font-size:18px; line-height:1; margin-block:var(--space-1); }
.arch-ext{ border:1px dashed var(--berta-linie-strong); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); display:flex; align-items:center; gap:var(--space-3); color:var(--fg-soft); font-size:var(--text-small); }
.arch-no{ display:flex; align-items:center; gap:var(--space-2); color:var(--color-error); font-size:var(--text-small); font-weight:500; }
.arch-no .ico{ width:16px; height:16px; }

/* chat mock (produkt page) */
.chatmock{ border:1px solid var(--berta-linie); border-radius:var(--radius-md); background:var(--bg-raised); overflow:hidden; }
.chatmock-bar{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--berta-linie); background:var(--bg-sunken); }
.chatmock-dot{ width:9px; height:9px; border-radius:var(--radius-full); background:var(--berta-linie-strong); }
.chatmock-title{ margin-left:var(--space-2); font-size:var(--text-small); color:var(--fg-mute); font-weight:500; }
.chatmock-body{ padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-5); }
.msg{ max-width:84%; }
.msg-user{ align-self:flex-end; background:var(--berta-tinte); color:var(--berta-papier); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-small); }
.msg-berta{ align-self:flex-start; }
.msg-berta .msg-role{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--berta-akt); font-weight:600; margin-bottom:var(--space-2); }
.msg-berta .msg-role .sq{ width:8px; height:8px; background:var(--berta-akt); }
.msg-berta .msg-text{ font-size:var(--text-small); color:var(--fg-default); line-height:1.6; }
.cite{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--berta-akt-ink); background:var(--berta-akt-bg); border-radius:var(--radius-xs); padding:1px 6px; text-decoration:none; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--berta-linie); background:var(--bg-sunken); padding-block:var(--space-16) var(--space-8); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-8); }
.footer h4{ font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-mute); font-weight:600; margin:0 0 var(--space-4); }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.footer-links a{ font-size:var(--text-small); color:var(--fg-soft); text-decoration:none; }
.footer-links a:hover{ color:var(--fg-default); text-decoration:underline; text-decoration-color:var(--berta-akt); }
.footer-brand p{ font-size:var(--text-small); color:var(--fg-soft); max-width:34ch; margin-top:var(--space-4); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--berta-linie); flex-wrap:wrap; }
.footer-bottom .t-small{ color:var(--fg-mute); }

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero{ padding-block:var(--space-24); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-16); align-items:center; }
.hero h1.t-display{ font-size:3.25rem; line-height:1.08; margin-block:var(--space-5); text-wrap:balance; }
.hero .lead{ font-size:1.1875rem; max-width:46ch; }
.hero-actions{ display:flex; gap:var(--space-3); margin-top:var(--space-8); flex-wrap:wrap; }
.hero-photo{ aspect-ratio:4/3.4; }
.hero-meta{ display:flex; gap:var(--space-6); margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--berta-linie); flex-wrap:wrap; }
.hero-meta .hm{ display:flex; flex-direction:column; gap:2px; }
.hero-meta .hm-k{ font-family:var(--font-serif); font-size:1.375rem; font-weight:500; }
.hero-meta .hm-v{ font-size:var(--text-micro); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--fg-mute); font-weight:500; }

/* pull quote / potato note */
.pull{ font-family:var(--font-serif); font-size:1.5rem; line-height:1.4; color:var(--fg-default); text-wrap:pretty; max-width:24ch; }
.pull-quote{ border-left:2px solid var(--berta-akt); padding-left:var(--space-5); font-family:var(--font-serif); font-size:1.375rem; line-height:1.45; color:var(--fg-soft); font-style:italic; }

/* tier cards */
.tier{ display:flex; flex-direction:column; gap:var(--space-5); }
.tier-spec{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.tier-spec li{ display:flex; gap:var(--space-3); font-size:var(--text-small); color:var(--fg-soft); }
.tier-spec .ico{ width:16px; height:16px; color:var(--berta-akt); margin-top:2px; }

/* divider helpers */
.hr{ height:1px; background:var(--berta-linie); border:none; margin:0; }
.note{ font-size:var(--text-small); color:var(--fg-mute); font-style:italic; }

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:var(--space-10); }
  .hero h1.t-display{ font-size:2.5rem; }
  .cols-3{ grid-template-columns:1fr; }
  .cols-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .footer-brand{ grid-column:1 / -1; }
  .arch-layer .lyr-desc{ display:none; }
}
@media (max-width:680px){
  .nav-links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--bg-raised); border-bottom:1px solid var(--berta-linie); padding:var(--space-3); box-shadow:var(--shadow-md); transform:translateY(-120%); transition:transform var(--duration-normal) var(--ease-out); }
  .nav-links.is-open{ transform:translateY(0); }
  .nav-link{ padding:var(--space-3); }
  .nav-cta{ margin:var(--space-2) 0 0; }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .section{ padding-block:var(--space-16); }
  .hero{ padding-block:var(--space-12); }
  .footer-grid{ grid-template-columns:1fr; }
  .compare thead{ display:none; }
  .compare,.compare tbody,.compare tr,.compare td{ display:block; width:100%; }
  .compare td{ border:none; }
  .compare tr{ border-top:1px solid var(--berta-linie); padding-block:var(--space-2); }
}