/* =============================================================
   BK Studio — site.css
   Self-hosted via Bunny Fonts (DSGVO, no Google).
   Variables, reset, layout, components, mobile-first responsive.
   ============================================================= */

/* Self-hosted webfonts — DSGVO: no external connection */
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* Colors */
  --paper:        #F4F2EE;
  --paper-2:      #EAE6DD;
  --paper-3:      #E0DBCF;
  --ink:          #1F1B17;
  --ink-2:        #4A413A;
  --ink-3:        #8A7F75;
  --ink-4:        #B5ACA2;
  --espresso:     #1A1410;
  --orange:       #F25C1F;
  --orange-dark:  #C7430F;
  --cream-on-dark: #F4F2EE;

  --border:       rgba(31,27,23,0.14);
  --border-2:     rgba(31,27,23,0.24);
  --border-dark:  rgba(244,242,238,0.18);

  /* Type */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1440px;
  --gutter: clamp(20px, 5vw, 56px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select {
  font: inherit; color: inherit; background: transparent;
  border: 0; outline: none; padding: 0;
}

/* ----- Type ----- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.display-xl { font-size: clamp(56px, 9vw, 128px); font-weight: 300; line-height: 0.98; }
.display-lg { font-size: clamp(44px, 6.5vw, 96px); font-weight: 300; line-height: 1; }
.display-md { font-size: clamp(36px, 4.6vw, 72px); font-weight: 300; }
.display-sm { font-size: clamp(28px, 3.2vw, 48px); font-weight: 300; }
em { font-style: italic; }
.italic { font-family: var(--serif); font-style: italic; }
.orange { color: var(--orange); }
p { margin: 0; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); }
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  display: inline-block;
}
.eyebrow .dot { color: var(--orange); }
.section-num {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1;
}

/* ----- Layout ----- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 12vw, 160px) 0; }
.section-tight { padding: clamp(48px, 8vw, 96px) 0; }
.split { display: grid; gap: clamp(40px, 6vw, 80px); }
.split-1-2 { grid-template-columns: 1fr 2fr; }
.split-3-2 { grid-template-columns: 3fr 2fr; }
.split-2-1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 800px) {
  .split-1-2, .split-3-2, .split-2-1 { grid-template-columns: 1fr; }
}

/* ----- Top ticker ----- */
.ticker {
  background: var(--espresso);
  color: var(--cream-on-dark);
  padding: 10px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.ticker .slot { color: var(--orange); }
@media (max-width: 640px) {
  .ticker { font-size: 10px; letter-spacing: 0.16em; gap: 8px; }
  .ticker .lang { display: none; }
}

/* ----- Nav ----- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand em { color: var(--orange); font-style: italic; }
.nav-links {
  display: flex;
  gap: clamp(20px, 2.6vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-links a {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--ink);
  border-color: var(--ink);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-cta {
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 8px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform 220ms var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.open .nav-toggle span { background: transparent; }
.nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  /* Hamburger toggle visible, desktop CTA hidden */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  /* Fullscreen overlay menu */
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--espresso);
    color: var(--cream-on-dark);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    padding: 120px var(--gutter) 80px;
    margin: 0;
    list-style: none;
    transform: translateY(-101%);
    transition: transform 360ms var(--ease);
    z-index: 60;
    font-family: var(--serif);
    font-size: clamp(28px, 7vw, 40px);
    font-weight: 300;
    letter-spacing: -0.01em;
    text-transform: none;
    overflow-y: auto;
  }
  .nav-links li {
    width: 100%;
    border: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }
  .nav-links a {
    display: block;
    padding: 14px 0;
    color: var(--cream-on-dark);
    border: 0;
    letter-spacing: -0.01em;
    text-transform: none;
    font-size: inherit;
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] {
    color: var(--orange);
    border: 0;
  }

  /* Open state */
  .nav.open .nav-links { transform: translateY(0); }
  .nav.open .nav-links li { opacity: 1; transform: translateY(0); }
  .nav.open .nav-links li:nth-child(1) { transition-delay: 120ms; }
  .nav.open .nav-links li:nth-child(2) { transition-delay: 180ms; }
  .nav.open .nav-links li:nth-child(3) { transition-delay: 240ms; }
  .nav.open .nav-links li:nth-child(4) { transition-delay: 300ms; }
  .nav.open .nav-links li:nth-child(5) { transition-delay: 360ms; }

  /* Mobile CTA inside menu, sticky to bottom of overlay */
  .nav-links::after {
    content: '';
    flex: 1;
  }
  .nav-mobile-cta {
    display: block !important;
    margin-top: 32px;
    padding: 16px 24px;
    border: 1px solid var(--cream-on-dark);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream-on-dark);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms var(--ease) 420ms, transform 400ms var(--ease) 420ms, background 200ms;
    width: 100%;
  }
  .nav.open .nav-mobile-cta { opacity: 1; transform: translateY(0); }
  .nav-mobile-cta:hover { background: var(--orange); border-color: var(--orange); }

  /* Lift the hamburger above the overlay; invert color when open */
  .nav-toggle { position: relative; z-index: 70; border-color: var(--ink); }
  .nav.open .nav-toggle { border-color: var(--cream-on-dark); }
  .nav.open .nav-toggle span,
  .nav.open .nav-toggle span::before,
  .nav.open .nav-toggle span::after { background: var(--cream-on-dark); }

  /* Brand stays above overlay */
  .brand { position: relative; z-index: 70; transition: filter 200ms; }
  .nav.open .brand img { filter: brightness(0) invert(1); }

  /* Hide page scroll when menu open */
  body.menu-open { overflow: hidden; }
}

@media (min-width: 1025px) {
  .nav-mobile-cta { display: none; }
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--espresso); transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); transform: translateY(-1px); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light { color: var(--paper); border-color: rgba(244,242,238,0.5); }
.btn-ghost-light:hover { background: var(--paper); color: var(--ink); }
.btn .arr { transition: transform 200ms var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.link-underline {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  font-size: 13px;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.link-underline:hover { color: var(--orange); border-color: var(--orange); }

/* ----- Cards / surfaces ----- */
.surface-dark {
  background: var(--espresso);
  color: var(--cream-on-dark);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--cream-on-dark); }
.surface-dark p, .surface-dark .lead { color: rgba(244,242,238,0.78); }
.surface-dark .eyebrow { color: rgba(244,242,238,0.5); }
.surface-cream-2 { background: var(--paper-2); }

/* ----- Photo / image placeholder ----- */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2A1F18, #0A0604);
  border-radius: 2px;
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(242,92,31,0.18), transparent 60%);
  pointer-events: none;
}
.media-caption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,242,238,0.5);
  z-index: 1;
}
.media-caption-top {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,242,238,0.5);
  z-index: 1;
}

/* ----- Footer ----- */
.footer {
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: clamp(60px, 8vw, 80px) 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 48px);
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 18px;
}
.footer-grid p, .footer-grid a {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 8px;
  display: block;
}
.footer-grid a:hover { color: var(--orange); }
.foot-brand {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.foot-brand em { color: var(--orange); font-style: italic; }
.foot-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.foot-copy .tag {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ----- Common utilities ----- */
.hide-mobile { }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }
.only-mobile { display: none; }
@media (max-width: 720px) { .only-mobile { display: block; } }

/* Inline list dot separators */
.dot-list { display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--serif); font-size: 20px; color: var(--ink-2); font-style: italic; }


/* 4-column price grid (Betreuung) */
.price-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.price.price-dark{background:var(--ink);color:var(--cream-on-dark);border-color:var(--ink)}
.price.price-dark h3{color:var(--cream-on-dark)}
.price.price-dark .num,.price.price-dark .cur{color:var(--cream-on-dark)}
.price.price-dark ul li{color:rgba(244,242,238,0.85);border-color:rgba(244,242,238,0.15)}
@media (max-width:1100px){.price-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.price-grid-4{grid-template-columns:1fr}}
.media-photo span.media-caption-top{position:absolute;top:16px;left:16px;background:rgba(0,0,0,0.45);padding:4px 10px;border-radius:2px;font-size:10px;letter-spacing:0.22em;text-transform:uppercase}


/* Billing toggle (Monatlich / Jährlich) */
.billing-toggle{display:inline-flex;padding:4px;border:1px solid var(--border-1);border-radius:999px;background:var(--paper);margin-bottom:48px;gap:4px}
.bt-opt{font-family:var(--sans);font-size:13px;letter-spacing:0.02em;padding:10px 22px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background 200ms,color 200ms;display:inline-flex;align-items:center;gap:8px}
.bt-opt:hover{color:var(--ink)}
.bt-opt.is-active{background:var(--ink);color:var(--cream-on-dark)}
.bt-save{font-size:11px;letter-spacing:0.04em;padding:2px 8px;border-radius:999px;background:var(--orange);color:#fff}
.bt-opt.is-active .bt-save{background:rgba(255,255,255,0.18);color:#fff}


/* ===== MOBILE POLISH ===== */
/* Tightens the design for phones — applies site-wide.
   Targets the common patterns used by every page. */

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  /* Smaller, more readable display sizes on phones */
  .display-xl { font-size: clamp(40px, 11vw, 64px); line-height: 1; }
  .display-lg { font-size: clamp(36px, 9.5vw, 56px); line-height: 1.02; }
  .display-md { font-size: clamp(30px, 8vw, 44px); }
  .display-sm { font-size: clamp(24px, 6.5vw, 34px); }

  /* Section padding tighter */
  .section { padding: clamp(56px, 14vw, 96px) 0; }
  .section-tight { padding: 40px 0; }

  /* Any inline 160px-sidebar layout becomes single column */
  .wrap[style*="grid-template-columns:160px 1fr"],
  .wrap[style*="160px 1fr"] { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Numbered-section ghost number on hero pages: hide on mobile */
  .wrap[style*="160px 1fr"] > div:first-child > div[style*="clamp(60px,9vw,140px)"] { display: none; }

  /* Nav — slightly tighter */
  .nav-inner { padding: 14px var(--gutter); gap: 12px; }
  .brand-logo img { height: 40px !important; }

  /* Buttons easier to tap */
  .btn { padding: 14px 22px; font-size: 14px; min-height: 48px; }
  .nav-toggle { width: 44px; height: 44px; }

  /* Hero brand on phones: tighter, no excess height, content first */
  .hero-brand { min-height: 0 !important; }
  .hb-stage { padding: 24px var(--gutter) 28px; gap: 28px; }
  .hb-meta-top, .hb-meta-bottom { font-size: 10px; letter-spacing: 0.14em; }
  .hb-time { min-width: 7ch; }
  .hb-meta-bottom .hb-hint { display: none; }
  .hb-logo-area { max-width: 280px; padding: 16px 0; }
  .hb-headline { font-size: clamp(36px, 10vw, 56px) !important; }
  .hb-lead { font-size: 15px; margin: 24px auto 28px; }
  .hero-brand::before { width: 320px; height: 320px; filter: blur(50px); }
  .hero-brand::after { width: 280px; height: 280px; filter: blur(50px); }

  /* TOC index — 1 column on phones */
  .toc-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .toc-grid > a { padding-top: 14px !important; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .toc-grid > a:first-child { border-top: 1px solid var(--ink) !important; }
  .toc-grid > a:last-child { border-bottom: 0; }

  /* Service rows: stack everything */
  .svc-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 28px 0 !important; }
  .svc-tags { font-size: 12px; }
  .svc-num { font-size: 28px !important; }

  /* Bonus card */
  .bonus-card { padding: 28px !important; gap: 24px !important; }
  .bonus-card > div:last-child { text-align: left !important; }

  /* Step rows (Ablauf) */
  .step { grid-template-columns: 1fr !important; gap: 16px !important; padding: 40px 0 !important; }
  .step-num { font-size: 36px !important; }
  .step-side { display: none !important; }
  .step-list { grid-template-columns: 1fr !important; }

  /* Studio stats band — 2 cols, lighter */
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* Kontakt split → stack, slimmer padding */
  .kontakt-split { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .kontakt-split > div { padding: 56px var(--gutter) !important; }

  /* Form fields: prevent iOS auto-zoom — 16px min input font */
  .field input, .field textarea { font-size: 16px !important; }
  textarea { font-size: 16px; }

  /* Chips wrap nicer */
  .chip { padding: 10px 14px; font-size: 13px; }

  /* Footer columns stack to 1 (already 2 by site.css; below 480 makes 1) */
  .foot-copy { font-size: 10px; gap: 8px; text-align: left; }
  .foot-copy span { width: 100%; }

  /* Price cards spacing */
  .price { padding: 28px !important; }
  .price-amt .num { font-size: 44px !important; }

  /* Billing toggle on small screens */
  .billing-toggle { width: 100%; }
  .bt-opt { flex: 1; text-align: center; padding: 10px 12px; font-size: 12px; }

  /* Case study + detail grids */
  .case-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .case-grid > aside { order: 1 !important; padding-top: 8px !important; }
  .case-grid > div { order: 2 !important; }
  .detail-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Studio dark band on home */
  .studio-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .studio-grid .media-photo { aspect-ratio: 4/5; max-width: 320px; margin: 0 auto; }

  /* Hero-grids on subpages tighter */
  .hero-grid { gap: 20px !important; }

  /* Generic huge background numbers in heroes — hide on phone */
  section .wrap > div > div[style*="font-size:clamp(60px,9vw,140px)"],
  section .wrap > div > div[style*="font-size:clamp(80px,14vw,200px)"] { display: none !important; }

  /* Datenschutz/Impressum readable */
  .wrap h2 { font-size: 22px !important; }
}

/* Very small phones */
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .nav-inner { gap: 8px; }
  .brand-logo img { height: 32px !important; }
  .billing-toggle { padding: 3px; }
  .bt-opt { padding: 8px 10px; font-size: 11px; }
}

/* Avoid iOS clipping the bottom of the hero when address bar shows */
@supports (-webkit-touch-callout: none) {
  .hero-brand { min-height: 100svh; }
  @media (max-width: 720px) { .hero-brand { min-height: 0 !important; } }
}


/* ===== TABLET POLISH (1024px and below) ===== */
/* Layout-only adjustments so tablets stop trying to be desktop. */
@media (max-width: 1024px) {
  /* Hero brand stacks earlier so the giant headline gets full width */
  .hb-center { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hb-logo-area { max-width: 380px !important; order: 2; margin: 0 auto; }
  .hb-copy { order: 1; text-align: center; }
  .hb-lead { margin-left: auto !important; margin-right: auto !important; }
  .hb-cta { justify-content: center; }

  /* 160px-sidebar hero pages → 1 column */
  .wrap[style*="160px 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Big ghost numbers in subpage heroes are heavy at tablet sizes */
  section .wrap > div > div[style*="font-size:clamp(60px,9vw,140px)"] { font-size: clamp(48px,8vw,96px) !important; }

  /* Service rows tighter on tablet */
  .svc-row { gap: 24px !important; }

  /* Studio band image smaller */
  .studio-grid { grid-template-columns: 1fr 1.6fr !important; gap: 48px !important; }

  /* Bonus card wraps to 1 col */
  .bonus-card { grid-template-columns: 1fr !important; gap: 32px !important; padding: 36px !important; }
  .bonus-card > div:last-child { text-align: left !important; }

  /* Step rows: drop the right artwork column */
  .step { grid-template-columns: 80px 1fr !important; }
  .step-side { display: none !important; }

  /* Kontakt split also stacks (it currently breaks at 900) */
  .kontakt-split { grid-template-columns: 1fr !important; min-height: 0 !important; }

  /* Stats band more compact */
  .stats-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .stats { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }

  /* Principles stay 2-col */
  /* Price grids tighter */
  .price-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .price-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* TOC index 2-col on tablet */
  .toc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  /* Case study & projekte */
  .case-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .detail-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
}


/* ===== MOBILE — FINAL FIX (high specificity, !important everywhere) ===== */
@media (max-width: 900px) {
  /* All wrap-level inline grids → single column */
  .wrap[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Any inline grid except specific small ones */
  section > .wrap > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Sections that are direct grids (kontakt-split etc) */
  section[style*="grid-template-columns"] { grid-template-columns: 1fr !important; min-height: 0 !important; }

  /* Price grids force 1 column */
  .price-grid, .price-grid-4 { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Stats inner: 2-col only */
  .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* Detail grid (projekte) */
  .detail-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* TOC */
  .toc-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .toc-grid > a { padding: 16px 0 !important; border-top: 1px solid var(--ink) !important; }

  /* Studio band: portrait full-width, capped */
  .studio-grid .media-photo { max-width: 360px; margin: 0 auto; }

  /* Hide vertical writing direction crap */
  [style*="writing-mode"] { writing-mode: horizontal-tb !important; }

  /* Big ghost section numbers — hide */
  div[style*="font-size:clamp(60px,9vw,140px)"],
  div[style*="font-size:clamp(80px,14vw,200px)"],
  div[style*="font-size:clamp(48px,8vw,96px)"] { display: none !important; }

  /* Hero brand on tablet/phone — content first, logo after */
  .hb-center { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hb-copy { order: 1; text-align: center; }
  .hb-logo-area { order: 2; max-width: 320px !important; margin: 0 auto; aspect-ratio: 1; }
  .hb-lead { margin-left: auto !important; margin-right: auto !important; max-width: 38ch; }
  .hb-cta { justify-content: center; }

  /* Steps: side artwork hidden, 2-col grid */
  .step { grid-template-columns: 60px 1fr !important; gap: 16px !important; padding: 36px 0 !important; }
  .step-side { display: none !important; }
  .step-list { grid-template-columns: 1fr !important; }
  .step-num { font-size: 36px !important; }

  /* SVC rows */
  .svc-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 28px 0 !important; }
  .svc-num { font-size: 28px !important; }

  /* Bonus card */
  .bonus-card { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px !important; }
  .bonus-card > div:last-child { text-align: left !important; }

  /* Form fields min font 16px to prevent iOS zoom */
  input, textarea, select { font-size: 16px !important; }

  /* Display sizes — phones */
  .display-xl { font-size: clamp(40px, 11vw, 64px) !important; line-height: 1 !important; }
  .display-lg { font-size: clamp(36px, 9.5vw, 56px) !important; line-height: 1.02 !important; }
  .display-md { font-size: clamp(30px, 8vw, 44px) !important; }
  .display-sm { font-size: clamp(24px, 6.5vw, 34px) !important; }

  /* Section padding tighter on phone */
  .section { padding: 64px 0 !important; }
  .section-tight { padding: 40px 0 !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .footer-grid > :first-child { grid-column: 1 / -1 !important; }
  .foot-copy { font-size: 10px; gap: 8px; flex-direction: column; align-items: flex-start; }
}

/* Very narrow phones */
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: 1fr !important; }
}