/* ---------- 0. Hausschriften von UNGEZEIGT., selbst gehostet ---------- */
/* SIL Open Font License 1.1, siehe assets/fonts/LIZENZ.txt */
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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:"Newsreader";
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  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+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  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;
}

/* ============================================================
   arnepohl.de — Design System
   Keine externen Fonts, keine CDNs, keine Cookies.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  --bg:        #F7F4EF;
  --bg-deep:   #EFEAE1;
  --surface:   #FFFFFF;
  --elev:      #FBF9F6;
  --fg:        #16130F;
  --fg-soft:   #3B352E;
  --muted:     #6B645B;
  --line:      #E3DCD1;
  --line-soft: #EDE7DD;

  --brand:      #FF8500;
  --brand-ink:  #B45309;   /* kontraststark auf hellem Grund */
  --on-brand:   #1A1209;   /* Text auf der Markenfarbe */
  --brand-wash: #FFF2E0;

  --ink-panel:    #141210;  /* dunkle Sektionen, immer dunkel */
  --ink-panel-fg: #F6F2EC;
  --ink-panel-mut:#A39A8E;
  --ink-panel-line:#2C2824;

  --radius:   22px;
  --radius-s: 14px;
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(20,18,16,.04), 0 2px 8px rgba(20,18,16,.04);
  --shadow-m: 0 2px 4px rgba(20,18,16,.04), 0 18px 40px -20px rgba(20,18,16,.22);
  --shadow-l: 0 2px 4px rgba(20,18,16,.05), 0 36px 70px -32px rgba(20,18,16,.34);

  --ease: cubic-bezier(.22,.8,.22,1);
  --max: 1160px;
  --gut: clamp(20px, 5vw, 48px);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue",
          Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:        #0E0D0C;
    --bg-deep:   #141210;
    --surface:   #171513;
    --elev:      #1C1916;
    --fg:        #F4F0EA;
    --fg-soft:   #DAD3CA;
    --muted:     #A49B90;
    --line:      #2A2622;
    --line-soft: #221F1C;

    --brand:      #FF9A3D;
    --brand-ink:  #FFAE5C;
    --brand-wash: #2A1B0B;

    --ink-panel:    #1B1815;
    --ink-panel-fg: #F6F2EC;
    --ink-panel-mut:#A39A8E;
    --ink-panel-line:#332E29;

    --shadow-s: 0 1px 2px rgba(0,0,0,.4);
    --shadow-m: 0 18px 40px -20px rgba(0,0,0,.7);
    --shadow-l: 0 36px 70px -32px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:        #0E0D0C;
  --bg-deep:   #141210;
  --surface:   #171513;
  --elev:      #1C1916;
  --fg:        #F4F0EA;
  --fg-soft:   #DAD3CA;
  --muted:     #A49B90;
  --line:      #2A2622;
  --line-soft: #221F1C;
  --brand:      #FF9A3D;
  --brand-ink:  #FFAE5C;
  --brand-wash: #2A1B0B;
  --ink-panel:    #1B1815;
  --ink-panel-fg: #F6F2EC;
  --ink-panel-mut:#A39A8E;
  --ink-panel-line:#332E29;
  --shadow-s: 0 1px 2px rgba(0,0,0,.4);
  --shadow-m: 0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-l: 0 36px 70px -32px rgba(0,0,0,.8);
}

/* ---------- 2. Reset & Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* feine Körnung: gibt dem Papierton Tiefe */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{ opacity:.05; } }

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

h1,h2,h3,h4{
  margin:0;
  font-weight:680;
  letter-spacing:-.034em;
  line-height:1.04;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

::selection{ background:var(--brand); color:#fff; }

:where(a,button,input,textarea,summary):focus-visible{
  outline:2.5px solid var(--brand-ink);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px, 11vw, 150px); position:relative; }
.section--tight{ padding-block:clamp(56px, 8vw, 104px); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- 4. Typo-Bausteine ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.75rem; font-weight:620;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:22px;
}
.eyebrow .num{
  color:var(--brand-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px;
  background:var(--line);
  max-width:120px;
}

.display{ font-size:clamp(2.45rem, 7.2vw, 5.1rem); font-weight:700; letter-spacing:-.042em; }
.h2{ font-size:clamp(1.95rem, 4.4vw, 3.15rem); }
.h3{ font-size:clamp(1.2rem, 2vw, 1.5rem); letter-spacing:-.025em; line-height:1.18; }

.lead{
  font-size:clamp(1.08rem, 1.55vw, 1.3rem);
  line-height:1.56;
  color:var(--fg-soft);
  letter-spacing:-.015em;
}
.muted{ color:var(--muted); }
.measure{ max-width:62ch; }
.measure-s{ max-width:48ch; }

/* der orangene Punkt — Signatur der Seite */
.dot{ color:var(--brand); }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--fg); --btn-fg:var(--bg);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.45em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent; border-radius:var(--radius-pill);
  font:inherit; font-size:.97rem; font-weight:580; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.btn--brand{ --btn-bg:var(--brand); --btn-fg:var(--on-brand); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--fg);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--fg); background:var(--surface); }
.btn--sm{ padding:.68em 1.15em; font-size:.9rem; }

.linkarrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:580; text-decoration:none;
  color:var(--brand-ink);
  border-bottom:1.5px solid color-mix(in srgb, var(--brand-ink) 32%, transparent);
  padding-bottom:1px;
  transition:border-color .25s var(--ease);
}
.linkarrow .arr{ transition:transform .4s var(--ease); }
.linkarrow:hover{ border-bottom-color:var(--brand-ink); }
.linkarrow:hover .arr{ transform:translateX(4px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- 6. Header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:68px;
}
.brandmark{
  font-size:1.05rem; font-weight:660; letter-spacing:-.03em;
  text-decoration:none; color:var(--fg);
  display:inline-flex; align-items:baseline; gap:1px;
  white-space:nowrap;
}
body.ug .brandmark{ align-items:center; }
body.ug .brandmark picture{ display:block; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  padding:.5em .8em; border-radius:var(--radius-pill);
  font-size:.94rem; font-weight:520; color:var(--muted);
  text-decoration:none;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover{ color:var(--fg); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.header__cta{ display:inline-flex; }

.burger{
  display:none; width:42px; height:42px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line);
  border-radius:var(--radius-pill); cursor:pointer; color:var(--fg);
}
.burger span{ display:block; width:17px; height:1.5px; background:currentColor; position:relative; transition:transform .3s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span::before{ top:-5.5px; } .burger span::after{ top:5.5px; }
.burger[aria-expanded="true"] span{ transform:rotate(45deg); }
.burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after{ opacity:0; }

@media (max-width: 860px){
  .nav, .header__cta{ display:none; }
  .burger{ display:inline-flex; }
}

.mobilenav{
  position:fixed; inset:68px 0 0; z-index:99;
  background:var(--bg);
  padding:28px var(--gut) 40px;
  display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.mobilenav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobilenav a{
  padding:16px 0; font-size:1.45rem; font-weight:620; letter-spacing:-.03em;
  text-decoration:none; border-bottom:1px solid var(--line-soft);
}
.mobilenav .btn{ margin-top:22px; justify-content:center; }

/* ---------- 7. Hero ---------- */
.hero{ position:relative; padding-block:clamp(54px, 9vw, 120px) clamp(60px, 9vw, 120px); overflow:hidden; }
.hero__glow{
  position:absolute; pointer-events:none;
  width:min(78vw, 760px); aspect-ratio:1; border-radius:50%;
  top:-28%; right:-14%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--brand) 42%, transparent) 0%,
    color-mix(in srgb, var(--brand) 12%, transparent) 42%,
    transparent 68%);
  filter:blur(26px);
  opacity:.52;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero__glow{ opacity:.26; } }
.hero__inner{ position:relative; }
.hero h1{ margin-bottom:clamp(22px, 3vw, 30px); max-width:17ch; }
.hero .lead{ max-width:54ch; margin-bottom:clamp(30px, 4vw, 42px); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin-top:clamp(44px, 6vw, 72px);
  padding-top:22px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--muted); letter-spacing:-.005em;
}
.hero__meta span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__meta .pip{ width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none; }

/* ---------- 8. Zitat-Panel (dunkel) ---------- */
.panel{
  background:var(--ink-panel); color:var(--ink-panel-fg);
  border-radius:clamp(24px, 3.4vw, 34px);
  padding:clamp(34px, 6vw, 72px);
  position:relative; overflow:hidden;
}
.panel .muted{ color:var(--ink-panel-mut); }
.quote{
  font-size:clamp(1.4rem, 3.1vw, 2.35rem);
  font-weight:640; letter-spacing:-.032em; line-height:1.22;
  max-width:24ch;
}
.quote__by{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--ink-panel-line);
  font-size:.88rem; color:var(--ink-panel-mut);
  display:flex; align-items:center; gap:10px;
}
.quote__by b{ color:var(--ink-panel-fg); font-weight:580; }

/* ---------- 9. Zwei Wege ---------- */
.ways{
  display:grid; gap:clamp(18px, 2.4vw, 26px);
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  margin-top:clamp(36px, 5vw, 56px);
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(26px, 3.6vw, 42px);
  display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--shadow-s);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-l); border-color:color-mix(in srgb, var(--fg) 14%, var(--line)); }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:14px; }

.badge{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em .8em; border-radius:var(--radius-pill);
  font-size:.74rem; font-weight:620; letter-spacing:.07em; text-transform:uppercase;
  background:var(--brand-wash); color:var(--brand-ink);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  white-space:nowrap;
}
.badge--quiet{ background:transparent; color:var(--muted); border-color:var(--line); }
.badge .pulse{
  width:6px; height:6px; border-radius:50%; background:currentColor;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .badge .pulse{ animation:none; opacity:.8; } }

.ticks{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ticks li{
  position:relative; padding-left:26px;
  font-size:.97rem; color:var(--fg-soft);
}
.ticks li::before{
  content:""; position:absolute; left:3px; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb, var(--brand) 85%, transparent);
}
.card__foot{ margin-top:auto; padding-top:8px; }

.note{
  background:var(--elev); border:1px dashed var(--line);
  border-radius:var(--radius-s); padding:16px 18px;
  font-size:.93rem; color:var(--muted);
}

/* ---------- 10. Über mich ---------- */
.about{
  display:grid; gap:clamp(30px, 5vw, 66px);
  grid-template-columns:minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items:start;
}
@media (max-width: 900px){ .about{ grid-template-columns:1fr; } }

.portrait{
  position:relative; border-radius:var(--radius);
  overflow:hidden; background:var(--bg-deep);
  box-shadow:var(--shadow-m);
  aspect-ratio:4/5;
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.portrait__tag{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 15px; border-radius:var(--radius-pill);
  background:rgba(20,18,16,.58);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  color:#F6F2EC; font-size:.82rem; letter-spacing:-.005em;
}
.portrait__tag b{ font-weight:600; }
.portrait__tag span{ color:#B9B0A4; }

.about__body > * + *{ margin-top:22px; }
.about__body p{ color:var(--fg-soft); }

.values{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:clamp(40px, 5vw, 62px);
}
.value{ background:var(--bg); padding:clamp(22px, 2.6vw, 30px); transition:background-color .3s var(--ease); }
.value:hover{ background:var(--surface); }
.value h3{ font-size:1.05rem; font-weight:620; letter-spacing:-.022em; margin-bottom:8px; }
.value p{ font-size:.93rem; color:var(--muted); line-height:1.55; }
.value__n{
  display:block; font-size:.72rem; font-weight:640; letter-spacing:.12em;
  color:var(--brand-ink); margin-bottom:14px; font-variant-numeric:tabular-nums;
}

/* ---------- 11. Kontakt ---------- */
.contact{ background:var(--bg-deep); }
.contact__grid{
  display:grid; gap:clamp(18px, 2.4vw, 24px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  margin-top:clamp(34px, 4.5vw, 48px);
}
@media (max-width: 820px){ .contact__grid{ grid-template-columns:1fr; } }

.mailcard{
  background:var(--ink-panel); color:var(--ink-panel-fg);
  border-radius:var(--radius); padding:clamp(28px, 4vw, 44px);
  display:flex; flex-direction:column; gap:20px;
}
.mailcard__label{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-panel-mut); font-weight:620; }
.mailaddr{
  font-size:clamp(1.15rem, 2.9vw, 1.95rem);
  font-weight:640; letter-spacing:-.035em;
  text-decoration:none; color:var(--ink-panel-fg);
  word-break:break-word; line-height:1.15;
  transition:color .25s var(--ease);
}
.mailaddr:hover{ color:var(--brand); }
.mailcard .btn--ghost{ --btn-fg:var(--ink-panel-fg); border-color:var(--ink-panel-line); }
.mailcard .btn--ghost:hover{ border-color:var(--ink-panel-fg); background:rgba(255,255,255,.06); }

.infocard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(26px, 3.4vw, 36px);
  display:flex; flex-direction:column; gap:22px;
}
.infoblock h3{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:620; margin-bottom:10px; }
.infoblock address{ font-style:normal; color:var(--fg-soft); line-height:1.6; }
.infoblock p{ font-size:.95rem; color:var(--fg-soft); }

.copied{
  font-size:.85rem; color:var(--ink-panel-mut);
  opacity:0; transform:translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.copied.is-on{ opacity:1; transform:none; }

/* ---------- 12. Footer ---------- */
.footer{ padding-block:clamp(40px, 5vw, 60px); border-top:1px solid var(--line); }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:16px 28px;
  align-items:center; justify-content:space-between;
  font-size:.9rem; color:var(--muted);
}
.footer nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer a{ text-decoration:none; color:var(--muted); transition:color .2s var(--ease); }
.footer a:hover{ color:var(--fg); }

/* ---------- 13. Rechtsseiten ---------- */
.legal{ padding-block:clamp(56px, 8vw, 104px); }
.legal__head{ margin-bottom:clamp(34px, 4.5vw, 52px); }
.prose{ max-width:72ch; }
.prose h2{
  font-size:clamp(1.2rem, 2.1vw, 1.5rem); letter-spacing:-.025em;
  margin-top:clamp(36px, 4vw, 52px); margin-bottom:12px;
  padding-top:clamp(28px, 3vw, 36px); border-top:1px solid var(--line);
}
.prose h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:1.02rem; font-weight:620; margin-top:26px; margin-bottom:8px; letter-spacing:-.02em; }
.prose p, .prose ul, .prose address{ color:var(--fg-soft); font-size:1rem; }
.prose p + p{ margin-top:14px; }
.prose address{ font-style:normal; line-height:1.65; margin-top:8px; }
.prose ul{ margin:12px 0 0; padding-left:1.15em; display:flex; flex-direction:column; gap:8px; }
.prose a{ color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.prose .stand{ margin-top:46px; font-size:.86rem; color:var(--muted); }

.backlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.92rem; font-weight:540; color:var(--muted);
  text-decoration:none; margin-bottom:28px;
  transition:color .2s var(--ease);
}
.backlink:hover{ color:var(--fg); }
.backlink .arr{ transition:transform .35s var(--ease); }
.backlink:hover .arr{ transform:translateX(-4px); }

/* ---------- 14. Scroll-Reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn:hover,.card:hover{ transform:none; }
  *{ animation-duration:.001ms !important; }
}
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- 15. Utilities ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--fg); color:var(--bg);
  padding:12px 18px; border-radius:var(--radius-pill);
  text-decoration:none; font-size:.92rem; font-weight:560;
  transition:top .25s var(--ease);
}
.skip:focus{ top:14px; }

/* Abstand unter einer Sektions-Überschrift */
.lead--under{ margin-top:20px; }

/* ---------- 16. Feinschliff ---------- */

/* Zitat-Panel: der Abstand kommt von der folgenden Sektion */
.section--quote{ padding-block:clamp(44px, 6vw, 84px) 0; }

/* Luft um die Trennlinie herum begrenzen */
.section--flush-b{ padding-bottom:clamp(48px, 6vw, 84px); }
.section--flush-t{ padding-top:clamp(48px, 6vw, 84px); }

/* Bildunterschrift: sicher lesbar, egal was im Foto darunter liegt */
.portrait__tag{ background:rgba(16,14,12,.74); }

/* Mailkarte füllt die Höhe der Nachbarkarte sinnvoll aus */
.mailcard{ justify-content:space-between; }
.mailcard .btn--ghost{ border-color:rgba(255,255,255,.22); }
.mailcard .btn--ghost:hover{ border-color:rgba(255,255,255,.55); }

/* Fließtext in den Karten etwas kräftiger als die Nebenangaben */
.card > p{ color:var(--fg-soft); }

/* Mailkarte bekommt eine feine Kante, damit sie sich im Dunkelmodus absetzt */
.mailcard{ border:1px solid var(--ink-panel-line); }

/* Weicherer Verlauf im Hero */
.hero__glow{ filter:blur(44px); }

/* Im Dunkelmodus den hellen Studiohintergrund des Fotos abmildern */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .portrait img{ filter:brightness(.86) contrast(1.02); }
}
:root[data-theme="dark"] .portrait img{ filter:brightness(.86) contrast(1.02); }

/* ============================================================
   17. UNGEZEIGT.
   Eigene Farbwelt nach der UNGEZEIGT.-CI, bewusst getrennt von
   arne-pohl.de: Schiefer als Grund, Kalk als Schrift, Siena als
   einziger Akzent, Stein und Asche für Linien und Nebentexte.
   Die Seite ist immer dunkel, unabhängig vom Systemmodus, und
   arbeitet mit kantigen statt runden Formen.
   ============================================================ */

body.ug{
  color-scheme: dark;

  /* Markenfarben: Schiefer, Kalk, Stein, Asche, Siena */
  --bg:        #1F1E1C;   /* Schiefer */
  --bg-deep:   #191816;
  --surface:   #282623;
  --elev:      #2E2C29;
  --fg:        #F3F0EA;   /* Kalk     */
  --fg-soft:   #D8D3C9;
  --muted:     #A39E95;   /* Asche, aufgehellt für Kontrast */
  --line:      #3D3A35;   /* Stein, dunkel */
  --line-soft: #2D2B28;

  --brand:      #C97A5E;  /* Siena, hell für dunklen Grund */
  --brand-ink:  #DB9077;
  --brand-wash: #33241E;
  --on-brand:   #1F1E1C;

  --ink-panel:     #151412;  /* tiefer als der Grund: die Bühne */
  --ink-panel-fg:  #F3F0EA;
  --ink-panel-mut: #A39E95;
  --ink-panel-line:#36332F;

  --radius:      6px;
  --radius-s:    4px;
  --radius-pill: 4px;

  --shadow-s: 0 1px 2px rgba(0,0,0,.35);
  --shadow-m: 0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-l: 0 36px 70px -32px rgba(0,0,0,.8);

  --font:         "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;

  /* Siena-Kante am oberen Rand: Erkennungszeichen von UNGEZEIGT. */
  border-top:3px solid var(--brand);
}
body.ug::before{ opacity:.05; }
body.ug .header.is-stuck{ border-bottom-color:var(--line); }

/* Bühnenflächen vom Grund absetzen */
body.ug :is(.podcast, .mailcard){ border:1px solid var(--ink-panel-line); border-radius:var(--radius); }

/* Fotos auf dem dunklen Grund leicht abdunkeln */
body.ug .portrait img{ filter:brightness(.88) contrast(1.02); }

/* Newsreader trägt die großen Zeilen, Instrument Sans alles andere */
body.ug :is(.display, .h2, .quote, .bigquote, .statement, .tile__head,
            .podcast__sub, .offer__name, h1, h2){
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.018em;
}
body.ug .display{ font-weight:560; letter-spacing:-.022em; }
body.ug .quote, body.ug .bigquote, body.ug .statement{ font-weight:450; letter-spacing:-.012em; }
body.ug .offer__name{ font-family:var(--font); font-weight:600; }

/* Der Hero-Schimmer trägt das gedämpfte Siena der Marke */
body.ug .hero__glow{
  background:radial-gradient(circle at 50% 50%,
    rgba(201,122,94,.30) 0%,
    rgba(201,122,94,.10) 42%,
    transparent 68%);
  opacity:.3;
}

/* Wortmarke */
.ugmark{
  font-weight:700; letter-spacing:.09em;
  font-variant-ligatures:none;
  white-space:nowrap;
}

/* ---------- 17.1 Kachel auf der Startseite ---------- */
.ug-tile{
  --surface:#1F1E1C;
  --fg:#F3F0EA;
  --fg-soft:#D8D3C9;
  --muted:#9C978E;
  --line:#36332F;
  --brand:#C97A5E;
  --brand-ink:#DB9077;
  --brand-wash:rgba(201,122,94,.13);
  --on-brand:#1F1E1C;
  --elev:#262421;
  background:#1F1E1C;
  border-color:#36332F;
  color:#F3F0EA;
}
.ug-tile:hover{ border-color:#56514A; }
.ug-tile .card__top{ align-items:flex-start; }
.pp-tile .card__top{ align-items:flex-start; min-height:0; }
/* Beide Kacheln beginnen mit einem gleich hohen Markenblock */
.card__top{ min-height:84px; }
/* Logo von UNGEZEIGT.
   S-Schnitt im Kopf (72–160 px), L-Schnitt auf der Kachel (ab 160 px),
   U-Kurzform im Favicon. Schutzraum: vier Punktbreiten, hier über die
   Abstände der umgebenden Bausteine gewahrt. */
.uglogo{ display:block; width:150px; height:auto; }
.uglogo--tile{ width:clamp(196px, 23vw, 248px); }
@media (max-width: 600px){ .uglogo{ width:132px; } }
.ug-tile__kicker{
  margin-top:8px; font-size:.84rem; color:#9AA29B; letter-spacing:-.005em;
}
.ug-tile__head{
  font-size:clamp(1.12rem, 1.9vw, 1.38rem);
  font-weight:620; letter-spacing:-.025em; line-height:1.24;
  color:#F2F1EC;
}

/* Gemeinsame Bausteine beider Kacheln */
.tile__kicker{
  margin-top:-6px; font-size:.86rem; color:var(--muted); letter-spacing:-.005em;
}
.tile__head{
  font-size:clamp(1.12rem, 1.9vw, 1.38rem);
  font-weight:620; letter-spacing:-.025em; line-height:1.24;
  color:var(--fg);
}

/* Logo von pohl&partners: Schriftzug folgt der Textfarbe, Figur bleibt orange */
.pplogo{
  width:clamp(168px, 20vw, 212px); height:auto; display:block;
  color:var(--fg);
}

/* Hervorgehobener Streifen am Fuß beider Kacheln */
.featstrip{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--radius-s);
  background:var(--brand-wash);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
.featstrip__icon{ flex:none; width:22px; height:22px; color:var(--brand-ink); margin-top:1px; }
.featstrip__tag{
  display:block; font-size:.68rem; font-weight:680;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink);
  margin-bottom:5px;
}
.featstrip b{ display:block; font-size:.95rem; font-weight:600; color:var(--fg); margin-bottom:5px; }
.featstrip p{ font-size:.87rem; line-height:1.5; color:var(--muted); }

/* ---------- 17.2 Hervorgehobene Fragen ---------- */
.qlist{
  list-style:none; margin:clamp(28px,3.6vw,38px) 0 0; padding:0;
  display:grid; gap:12px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width: 720px){ .qlist{ grid-template-columns:1fr; } }
.qlist li{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius-s);
  padding:18px 20px;
  font-size:1.02rem; line-height:1.45; color:var(--fg-soft);
  letter-spacing:-.015em;
}

/* ---------- 17.3 Großes Zitat ---------- */
.bigquote{
  margin-top:clamp(44px, 6vw, 72px);
  padding-top:clamp(34px, 4vw, 48px);
  border-top:1px solid var(--line);
  font-size:clamp(1.5rem, 3.6vw, 2.7rem);
  font-weight:660; letter-spacing:-.034em; line-height:1.18;
  max-width:22ch; text-wrap:balance;
}

/* ---------- 17.4 Drei Elemente ---------- */
.trio{
  display:grid; gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  margin-top:clamp(32px,4vw,46px);
}
.trio .card{ gap:12px; }
.trio h3{ font-size:1.12rem; font-weight:640; letter-spacing:-.024em; }

/* ---------- 17.5 RAUM-Prinzip ---------- */
.raum{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:clamp(32px,4vw,46px);
}
.raum__step{
  background:var(--bg); padding:clamp(24px,2.8vw,32px);
  display:flex; flex-direction:column; gap:10px;
  transition:background-color .3s var(--ease);
}
.raum__step:hover{ background:var(--surface); }
.raum__letter{
  font-size:clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight:700; line-height:.85; letter-spacing:-.05em;
  color:var(--brand);
}
.raum__step h3{ font-size:1.05rem; font-weight:640; letter-spacing:-.022em; }
.raum__step p{ font-size:.93rem; line-height:1.56; color:var(--muted); }

.smallnote{
  margin-top:18px; font-size:.86rem; line-height:1.55;
  color:var(--muted); max-width:70ch;
}

/* ---------- 17.6 Angebote ---------- */
.offers{
  display:grid; gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  margin-top:clamp(32px,4vw,46px);
}
.offer__name{
  font-size:1.3rem; font-weight:700; letter-spacing:.06em;
  line-height:1.15; color:var(--fg);
}
.offer__sub{
  font-size:.95rem; color:var(--brand-ink); font-weight:560;
  letter-spacing:-.01em; margin-top:6px;
}
.offer__frame{
  margin-top:4px; padding-top:16px; border-top:1px solid var(--line-soft);
}
.offer__frame h4{
  font-size:.72rem; font-weight:660; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.offer__frame ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:7px;
  font-size:.92rem; color:var(--fg-soft);
}
.offer__frame li{ position:relative; padding-left:16px; }
.offer__frame li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:6px; height:1.5px; background:var(--brand);
}

/* ---------- 17.7 Leitsätze ---------- */
.tenets{
  list-style:none; margin:clamp(30px,3.6vw,40px) 0; padding:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.tenets li{
  background:var(--bg); padding:clamp(20px,2.4vw,26px);
  font-size:1.05rem; font-weight:600; letter-spacing:-.025em;
  line-height:1.3; color:var(--fg);
}

/* ---------- 17.8 Podcast-Bereich ---------- */
.podcast{
  background:var(--ink-panel); color:var(--ink-panel-fg);
  border-radius:clamp(24px,3.4vw,34px);
  padding:clamp(34px,6vw,76px);
  position:relative; overflow:hidden;
}
.podcast .muted{ color:var(--ink-panel-mut); }
.podcast__wave{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(42%, 360px); opacity:.11; color:#C97A5E; pointer-events:none;
}
.podcast__inner{ position:relative; max-width:64ch; }
/* Schallwelle: jeder Balken schwingt leicht versetzt */
.wavebar{
  transform-box:fill-box; transform-origin:center;
  animation:wave 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.37s);
}
@keyframes wave{
  0%, 100%{ transform:scaleY(1); }
  25%{ transform:scaleY(.45); }
  50%{ transform:scaleY(1.18); }
  75%{ transform:scaleY(.7); }
}
@media (prefers-reduced-motion: reduce){ .wavebar{ animation:none; } }

.podcast__tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:680; letter-spacing:.17em;
  text-transform:uppercase; color:#C97A5E; margin-bottom:20px;
}
.podcast__tag svg{ width:17px; height:17px; }
.podcast h2{ color:var(--ink-panel-fg); }
.podcast__sub{
  margin-top:14px; font-size:clamp(1.05rem,1.8vw,1.3rem);
  color:#C6C0B6; letter-spacing:-.018em;
}
.podcast__body{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.podcast__body p{ color:#B3ADA3; font-size:1rem; line-height:1.62; }
.podcast__claim{
  margin-top:30px; padding-top:24px;
  border-top:1px solid var(--ink-panel-line);
  font-size:clamp(1.15rem,2.1vw,1.55rem);
  font-weight:640; letter-spacing:-.028em; color:var(--ink-panel-fg);
}

/* ---------- 17.9 Qualifikation ---------- */
.credential{
  margin-top:clamp(30px,3.6vw,40px);
  padding:clamp(22px,2.6vw,28px);
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--radius-s);
}
.credential b{ display:block; font-size:1.08rem; font-weight:640; letter-spacing:-.022em; }
.credential span{ display:block; font-size:.95rem; color:var(--muted); margin-top:4px; }

.statement{
  margin-top:clamp(30px,3.6vw,42px);
  font-size:clamp(1.2rem,2.5vw,1.85rem);
  font-weight:620; letter-spacing:-.03em; line-height:1.25;
  max-width:26ch; text-wrap:balance;
}

/* ---------- 17.10 Ablauf ---------- */
.steps{
  display:grid; gap:clamp(16px,2.2vw,24px);
  grid-template-columns:repeat(auto-fit, minmax(265px,1fr));
  margin-top:clamp(32px,4vw,46px);
  counter-reset:step;
}
.step{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px,2.8vw,32px);
  display:flex; flex-direction:column; gap:10px;
}
.step__n{
  font-size:.74rem; font-weight:680; letter-spacing:.14em;
  color:var(--brand-ink); font-variant-numeric:tabular-nums;
}
.step h3{ font-size:1.08rem; font-weight:640; letter-spacing:-.022em; }
.step p{ font-size:.94rem; color:var(--muted); line-height:1.58; }

/* ---------- 17.11 Fragen und Antworten ---------- */
.faq{
  margin-top:clamp(32px,4vw,46px);
  border-top:1px solid var(--line);
  max-width:80ch;
}
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 2px; cursor:pointer; list-style:none;
  font-size:1.05rem; font-weight:600; letter-spacing:-.022em; line-height:1.35;
  color:var(--fg);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-ink); }
.faq summary::after{
  content:""; flex:none; width:13px; height:13px; margin-top:6px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(225deg) translate(-2px,-2px); }
.faq__a{ padding:0 2px 24px; max-width:68ch; }
.faq__a p{ color:var(--fg-soft); font-size:.98rem; line-height:1.65; }
.faq__a p + p{ margin-top:10px; }

/* ---------- 17.12 Rechtlicher Hinweis am Seitenende ---------- */
.disclaimer{ padding-block:clamp(30px,4vw,44px); border-top:1px solid var(--line); }
.disclaimer__inner{
  display:flex; flex-wrap:wrap; gap:14px 36px;
  align-items:baseline; justify-content:space-between;
}
.disclaimer p{
  font-size:.89rem; line-height:1.6; color:var(--muted); max-width:72ch;
}
.disclaimer a{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.9rem; font-weight:580; white-space:nowrap;
  color:var(--brand-ink); text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb, var(--brand-ink) 34%, transparent);
  padding-bottom:1px;
  transition:border-color .25s var(--ease);
}
.disclaimer a:hover{ border-bottom-color:var(--brand-ink); }
.disclaimer a .arr{ transition:transform .35s var(--ease); }
.disclaimer a:hover .arr{ transform:translateX(4px); }

/* ---------- 17.13 Kontakthinweis ---------- */
.privacyhint{
  margin-top:18px; font-size:.87rem; line-height:1.55;
  color:var(--muted); max-width:62ch;
}

/* ---------- 17.14 Korrekturen auf dunklen Flächen ---------- */
/* Auf dunklem Grund trägt der Punkt das helle Siena, unabhängig vom Modus */
body.ug .podcast .dot,
body.ug .mailcard .dot{ color:#C97A5E; }

/* Primärbutton auf der dunklen Mailkarte: heller Grund, dunkle Schrift */
body.ug .mailcard .btn--brand{ --btn-bg:#C97A5E; --btn-fg:#1F1E1C; }

/* ---------- 17.15 Tippflächen auf kleinen Bildschirmen ---------- */
@media (max-width: 860px){
  .footer nav{ gap:2px 22px; }
  .footer nav a{ display:inline-block; padding-block:9px; }
  .disclaimer a{ padding-block:9px; }
  .ticks a.linkarrow{ padding-block:7px; }
  .mailaddr{ display:inline-block; padding-block:7px; }
  .prose a{ padding-block:4px; }
}

/* Rechtstexte: Abstand auch nach Listen und Adressblöcken */
.prose ul + p,
.prose address + p,
.prose ul + address,
.prose address + address{ margin-top:16px; }

/* ============================================================
   18. Anfrageformular
   ============================================================ */

.formcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(24px, 3.4vw, 40px);
  max-width:72ch;
  display:flex; flex-direction:column; gap:clamp(20px, 2.4vw, 26px);
}
.formcard > p{ color:var(--fg-soft); }

/* Spamfalle, für Menschen unsichtbar */
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field{ display:flex; flex-direction:column; gap:7px; }
.fieldrow{ display:grid; gap:clamp(16px,2vw,22px); grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); }

.field label,
.scale legend{
  font-size:.92rem; font-weight:600; letter-spacing:-.012em; color:var(--fg);
  padding:0;
}
.req{ color:var(--brand-ink); font-weight:700; }
.opt{ font-weight:450; color:var(--muted); font-size:.86rem; margin-left:.35em; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  font:inherit; font-size:1rem; color:var(--fg);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  padding:13px 15px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.field :is(input,select,textarea):hover{ border-color:color-mix(in srgb, var(--fg) 26%, var(--line)); }
.field :is(input,select,textarea):focus-visible{
  outline:none;
  border-color:var(--brand-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}
.field :is(input,textarea)[aria-invalid="true"]{ border-color:#B3261E; }

.fieldhint{ font-size:.85rem; line-height:1.5; color:var(--muted); }
.fieldhint a{ color:var(--brand-ink); }
.fieldmsg{ font-size:.87rem; font-weight:560; color:#B3261E; }

/* Fehlerübersicht oberhalb des Formulars */
.formerror{
  max-width:72ch; margin-bottom:24px;
  background:var(--surface);
  border:1px solid #B3261E; border-left-width:3px;
  border-radius:var(--radius-s);
  padding:18px 20px;
}
.formerror b{ display:block; font-size:.96rem; margin-bottom:10px; }
.formerror ul{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px; }
.formerror li{ font-size:.92rem; color:var(--fg-soft); }
.formerror a{ color:#B3261E; }

/* ---------- Skala 1 bis 10 ---------- */
.scale{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.scale__row{
  display:grid; grid-template-columns:repeat(10, minmax(0,1fr));
  gap:6px; margin-top:4px;
}
@media (max-width: 560px){ .scale__row{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

.scale__item{ position:relative; display:block; }
.scale__item input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.scale__item span{
  display:flex; align-items:center; justify-content:center;
  min-height:48px;
  font-size:1rem; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--fg-soft);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.scale__item:hover span{ border-color:var(--fg); }
.scale__item input:checked + span{
  background:var(--brand); border-color:var(--brand);
  color:var(--on-brand); transform:translateY(-1px);
}
.scale__item input:focus-visible + span{
  outline:2.5px solid var(--brand-ink); outline-offset:2px;
}
.scale__ends{
  display:flex; justify-content:space-between; gap:16px;
  font-size:.8rem; color:var(--muted);
}

/* ---------- Einwilligung ---------- */
.check label{
  display:flex; gap:12px; align-items:flex-start;
  font-weight:450; font-size:.93rem; line-height:1.55; color:var(--fg-soft);
  cursor:pointer;
}
.check input{
  flex:none; width:21px; height:21px; margin:2px 0 0;
  accent-color:var(--brand);
  cursor:pointer;
}
.check a{ color:var(--brand-ink); }

.formfoot{
  display:flex; flex-direction:column; gap:14px; align-items:flex-start;
  padding-top:4px; border-top:1px solid var(--line-soft);
  padding-top:clamp(18px,2.2vw,24px);
}
.formfoot .fieldhint{ max-width:56ch; }

/* Kontaktkarte ohne große Adresszeile */
.mailcard__lead{ font-size:1rem; line-height:1.6; color:#C6C0B6; max-width:40ch; }

/* Hinweis in der reinen Gestaltungsvorschau */
.formnote{
  max-width:72ch; margin-bottom:18px; padding:14px 18px;
  background:var(--brand-wash); border:1px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius:var(--radius-s); font-size:.89rem; color:var(--fg-soft);
}

/* Freiwillige Skala: Rückweg zu „Keine Angabe“ und zugehörige Einwilligung */
.scale__none{
  display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start; margin-top:4px;
  font-size:.9rem; font-weight:450; color:var(--muted);
  cursor:pointer; padding-block:4px;
}
.scale__none input{
  width:18px; height:18px; margin:0; flex:none;
  accent-color:var(--brand); cursor:pointer;
}
.scale__none:hover{ color:var(--fg); }

.check-inline{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:10px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:.89rem; font-weight:450; line-height:1.55; color:var(--muted);
  cursor:pointer;
}
.check-inline input{
  flex:none; width:19px; height:19px; margin:1px 0 0;
  accent-color:var(--brand); cursor:pointer;
}
.check-inline a{ color:var(--brand-ink); }
.check-inline:hover{ color:var(--fg-soft); }

/* ============================================================
   19. UNGEZEIGT. Podcast
   Eigener Bereich unter /podcast/, erreichbar über
   ungezeigt-podcast.de (Weiterleitung). Gleiche Bausteine,
   die dunkle Podcast-Fläche wird zur Bühne.
   ============================================================ */

/* Buttons auf der dunklen Podcast-Fläche (Startseite und Bühne) */
.podcast__actions{ margin-top:28px; }
body.ug .podcast .btn--brand{ --btn-bg:#C97A5E; --btn-fg:#1F1E1C; }
.podcast .btn--ghost{ --btn-fg:var(--ink-panel-fg); border-color:rgba(255,255,255,.22); }
.podcast .btn--ghost:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); }
.podcast__domain{ font-size:.86rem; color:var(--ink-panel-mut); letter-spacing:.01em; }

/* Kopf: Wortmarke mit Bereichskennung */
.podlabel{
  margin-left:12px; padding:.3em .72em;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:.68rem; font-weight:660; letter-spacing:.16em; line-height:1.2;
  text-transform:uppercase; color:var(--brand-ink);
}

/* Bühne */
.section--pod{ padding-block:clamp(16px, 3vw, 36px) clamp(56px, 8vw, 104px); }
.podhero{ padding:clamp(36px, 7vw, 92px) clamp(26px, 6vw, 80px); }
.podhero .podcast__inner{ max-width:none; }
.podhero h1{
  color:var(--ink-panel-fg);
  font-size:clamp(2.15rem, 5.4vw, 4.1rem); line-height:1.06;
  max-width:16ch;
}
.podhero .podcast__sub{ max-width:52ch; margin-top:22px; }
.podhero .podcast__wave{ width:min(48%, 520px); right:-4%; opacity:.16; }
.podhero .podcast__claim{ margin-top:clamp(36px, 5vw, 56px); }

/* Themen: drei, zwei oder eine Spalte, damit nie eine Zelle leer bleibt */
.themes{
  display:grid; gap:1px;
  grid-template-columns:repeat(3, minmax(0,1fr));
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  margin-top:clamp(32px, 4vw, 46px);
}
@media (max-width: 900px){ .themes{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .themes{ grid-template-columns:1fr; } }
.theme{
  background:var(--bg); padding:clamp(22px, 2.6vw, 30px);
  display:flex; flex-direction:column; gap:8px;
  transition:background-color .3s var(--ease);
}
.theme:hover{ background:var(--surface); }
.theme h3{ font-size:1.05rem; font-weight:640; letter-spacing:-.022em; line-height:1.25; }
.theme p{ font-size:.93rem; color:var(--muted); line-height:1.55; }

/* Leitsätze mit genau vier Einträgen */
.tenets--four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .tenets--four{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .tenets--four{ grid-template-columns:1fr; } }

/* Querverweis zum Gesprächsangebot */
.crosslink{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:20px 40px; align-items:end;
}
@media (max-width: 720px){ .crosslink{ grid-template-columns:1fr; } }
.crosslink__text{ display:flex; flex-direction:column; gap:16px; max-width:62ch; min-width:0; }
.crosslink__text p{ color:var(--fg-soft); }

/* ---------- 18.1 Formularmeldungen auf dem dunklen Schiefer-Grund ---------- */
body.ug .fieldmsg,
body.ug .formerror a{ color:#F0897C; }
body.ug .formerror{ border-color:#F0897C; }
body.ug .field :is(input,textarea)[aria-invalid="true"]{ border-color:#F0897C; }
.formerror:focus{ outline:none; }
.formok{ margin-top:clamp(28px,3.4vw,40px); }
.fieldmsg:empty{ display:none; }