/* v11 „Vitrine“ (zweite Fassung) – Tokens siehe DESIGN-v11.md */

@font-face {
  font-family: "Bodoni Moda";
  src: url("schriften/bodoni-moda.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("schriften/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Elfenbein (Papier) */
  --flaeche: hsl(38 30% 94%);
  --flaeche-tief: hsl(36 22% 89%);
  --text: hsl(28 18% 10%);
  --text-leise: hsl(28 10% 33%);
  --linie: hsl(32 14% 80%);
  --linie-kraeftig: hsl(30 12% 62%);
  --messing: hsl(36 40% 34%);

  /* Wand (dunkle Abschnitte) */
  --wand: hsl(28 14% 8%);
  --wand-text: hsl(38 30% 91%);
  --wand-leise: hsl(34 12% 68%);
  --wand-linie: hsl(30 10% 21%);
  --wand-linie-kraeftig: hsl(30 9% 36%);
  --wand-messing: hsl(38 44% 66%);
  --licht: hsl(36 34% 34% / 0.4);

  /* Bilderrahmen */
  --rahmen: hsl(28 16% 11%);
  --passepartout: hsl(40 33% 98%);
  --schatten: 0 2px 4px hsl(28 30% 10% / 0.12), 0 28px 48px -26px hsl(28 40% 8% / 0.55);

  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --rand: max(16px, env(safe-area-inset-left), min(5vw, 56px));
  --abschnitt: clamp(72px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: hsl(28 12% 11%);
    --flaeche-tief: hsl(28 11% 14%);
    --text: hsl(38 28% 90%);
    --text-leise: hsl(34 10% 67%);
    --linie: hsl(30 9% 22%);
    --linie-kraeftig: hsl(30 9% 36%);
    --messing: hsl(38 44% 66%);

    --wand: hsl(28 16% 6%);
    --wand-linie: hsl(30 10% 17%);
    --passepartout: hsl(38 22% 90%);
    --rahmen: hsl(28 18% 4%);
    --schatten: 0 2px 4px hsl(0 0% 0% / 0.3), 0 28px 48px -26px hsl(0 0% 0% / 0.8);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 450 1.0625rem/1.65 var(--sans);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: var(--text); color: var(--flaeche); }
.wand ::selection { background: var(--wand-text); color: var(--wand); }

:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: 2px; }
.wand :focus-visible { outline-color: var(--wand-messing); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  /* Kleinere optische Größe = kräftigere Haarstriche, besser lesbar */
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
}
/* Bodoni Moda hat kein Kerning für W + Kleinbuchstabe, sonst klafft eine Lücke */
.w { margin-right: -0.09em; }
p { margin: 0; text-wrap: pretty; }

.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;
}
.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--text); color: var(--flaeche); padding: 12px 18px; text-decoration: none;
}
.sprung:focus { top: 16px; }

.innen {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Dunkle Wand */
.wand {
  background: var(--wand);
  color: var(--wand-text);
}

.banner {
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--wand);
  color: var(--wand-leise);
  border-bottom: 1px solid var(--wand-linie);
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  line-height: 1.5;
}

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 1rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.knopf:active { transform: scale(0.97); }
.knopf.klein { min-height: 44px; padding: 0 20px; font-size: 0.9375rem; }
.knopf.gross { min-height: 60px; padding: 0 36px; font-size: 1.0625rem; }
.knopf.hell { background: var(--wand-text); color: var(--wand); }
.knopf.dunkel { background: var(--text); color: var(--flaeche); }
.knopf.umriss { border-color: var(--linie-kraeftig); color: var(--text); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .knopf.hell:hover { background: hsl(38 30% 100%); }
  .knopf.dunkel:hover { background: color-mix(in hsl, var(--text) 86%, var(--messing)); }
  .knopf.umriss:hover { border-color: var(--text); }
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 0.35em;
  transition: text-underline-offset 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover { text-underline-offset: 0.5em; }
}

/* Kopf */
.kopf { background: var(--wand); color: var(--wand-text); }
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 20px;
}
.marke {
  display: flex;
  flex-direction: column;
  font: 500 1.375rem/1.1 var(--serif);
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin: 0;
}
.marke small {
  font: 450 0.8125rem/1.4 var(--sans);
  letter-spacing: 0.02em;
  color: var(--wand-leise);
  margin-top: 4px;
}
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a {
  color: var(--wand-leise);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 12px;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--wand-text); } }
.kopf .knopf { margin-left: 8px; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 7vw, 96px) clamp(72px, 9vw, 128px);
}
.hero::before {
  /* Lichtkegel eines Galerie-Strahlers auf der Wand hinter der Arbeit */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 52% 62% at 70% 48%, var(--licht), transparent 72%);
  pointer-events: none;
}
.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero-text .lead { margin-top: 32px; max-width: 46ch; }
.hero-preis {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--wand-linie);
  max-width: 44ch;
  color: var(--wand-leise);
}
.hero-preis .zahl {
  font: 600 1.5rem/1 var(--serif);
  font-variation-settings: "opsz" 11;
  color: var(--wand-text);
  margin-right: 4px;
}
.hero-preis a { color: var(--wand-text); white-space: nowrap; }

/* Laptop und Handy, auf denen Beispielseiten leise wechseln */
.geraet { margin: 0; min-width: 0; }
.geraete { position: relative; padding: 0 4% 0 0; }
.laptop-schirm {
  background: hsl(30 6% 11%);
  border-radius: 16px 16px 0 0;
  padding: 2.4% 2.4% 2.8%;
  box-shadow: inset 0 0 0 1px hsl(30 8% 24%), 0 50px 90px -40px hsl(0 0% 0% / 0.9);
}
.bildwechsel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: hsl(30 6% 6%);
  border-radius: 3px;
}
.bildwechsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 1400ms var(--ease-in-out);
}
.bildwechsel img.an { opacity: 1; }
.laptop-boden {
  position: relative;
  height: 16px;
  margin: 0 -6%;
  background: linear-gradient(hsl(30 5% 34%), hsl(30 6% 17%));
  border-radius: 2px 2px 16px 16px;
}
.laptop-boden::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 15%;
  height: 6px;
  transform: translateX(-50%);
  background: hsl(30 6% 22%);
  border-radius: 0 0 8px 8px;
}
.handy-geraet {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 21%;
  padding: 1.6%;
  background: hsl(30 6% 9%);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px hsl(30 8% 26%), 0 30px 60px -20px hsl(0 0% 0% / 0.9);
}
.handy-geraet .bildwechsel { aspect-ratio: 390 / 844; border-radius: 16px; }
/* Schild unter den Geräten: läuft mit dem Beispiel mit */
.schild-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  margin-right: 4%;
}
.schild-zeile .schild { margin: 0; margin-right: auto; }
.zaehler {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--wand-leise);
}
.pause {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--wand-linie-kraeftig);
  border-radius: 999px;
  background: transparent;
  color: var(--wand-text);
  cursor: pointer;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.pause[hidden] { display: none; }
.pause:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pause:hover { border-color: var(--wand-text); } }
.pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pause .i-los { display: none; }
.pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-los { display: block; }
.lead {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  max-width: 44ch;
  color: var(--text-leise);
}
.wand .lead { color: var(--wand-leise); }
.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 40px;
}

/* Gerahmtes Bild: dunkler Rahmen, helles Passepartout */
.rahmen {
  background: var(--passepartout);
  border: clamp(5px, 0.55vw, 8px) solid var(--rahmen);
  padding: clamp(10px, 3.2%, 32px);
  box-shadow: var(--schatten);
}
.rahmen img {
  width: 100%;
  box-shadow: 0 0 0 1px hsl(28 20% 10% / 0.1);
}
.wand .rahmen {
  border-color: hsl(30 12% 15%);
  box-shadow: 0 2px 4px hsl(0 0% 0% / 0.35), 0 40px 70px -30px hsl(0 0% 0% / 0.9);
}

/* Museumsschild */
.schild {
  display: grid;
  gap: 4px;
  margin-top: 24px;
  padding-left: 16px;
  border-left: 1px solid var(--messing);
}
.wand .schild { border-left-color: var(--wand-messing); }
.schild b {
  font: 600 1.1875rem/1.3 var(--serif);
  font-variation-settings: "opsz" 11;
}
.schild span {
  font-size: 0.875rem;
  color: var(--text-leise);
}
.wand .schild span { color: var(--wand-leise); }

.kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(56px, 8vw, 112px);
}
.kopfzeile h2,
.zwei-spalten h2,
.kontakt h2 {
  font-size: clamp(2.375rem, 4.4vw, 4.25rem);
}
.kopfzeile p {
  color: var(--text-leise);
  max-width: 42ch;
}

/* Zwei Spalten: Überschrift links, Inhalt rechts */
.zwei-spalten.mitte { align-items: center; }
.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: start;
}

/* Was Sie bekommen */
.vorteile { padding-block: var(--abschnitt); }
.vorteile .zwei-spalten { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.vorteile h2 { font-size: clamp(2.375rem, 4.4vw, 4.25rem); position: sticky; top: 32px; }
.liste {
  margin: 0;
  border-top: 1px solid var(--linie-kraeftig);
}
.liste div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px 32px;
  padding-block: 24px 28px;
  border-bottom: 1px solid var(--linie);
}
.liste dt {
  font: 600 1.3125rem/1.3 var(--serif);
  font-variation-settings: "opsz" 11;
}
.liste dd { margin: 0; color: var(--text-leise); max-width: 44ch; }

/* Beispiele */
.beispiele { padding-block: var(--abschnitt); background: var(--flaeche-tief); }
.reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 40px);
}
.reihe figure { margin: 0; }
.beispiel-link { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.beispiel-link .rahmen { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .beispiel-link:hover .rahmen { transform: translateY(-4px); }
}
.beispiele-mehr { margin-top: clamp(28px, 4vw, 44px); }

/* Preise: nur Ab-Preise */
.preise {
  padding-block: var(--abschnitt);
  background: var(--flaeche-tief);
}
.ab-preise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linie-kraeftig);
  border-bottom: 1px solid var(--linie-kraeftig);
}
.ab-preis { padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 52px) 0; }
.ab-preis + .ab-preis { border-left: 1px solid var(--linie); padding-left: clamp(24px, 4vw, 56px); }
.ab-art {
  font: 500 1rem/1.4 var(--sans);
  color: var(--text-leise);
}
.betrag {
  margin-top: 16px;
  font: 600 clamp(3.5rem, 7vw, 6rem)/0.95 var(--serif);
  font-variation-settings: "opsz" 11;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.betrag small {
  font: 500 0.25em/1 var(--sans);
  letter-spacing: 0;
  color: var(--text-leise);
  margin-right: 0.2em;
  vertical-align: 1.2em;
}
.zusatz { margin-top: 20px; color: var(--text-leise); max-width: 36ch; }
.preise-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  margin-top: clamp(32px, 4vw, 48px);
}
.hinweis { font-size: 0.875rem; color: var(--text-leise); max-width: 52ch; }

/* Visitenkarte mit Code-Feld */
.karte-abschnitt { padding-block: var(--abschnitt); }
.karte-abschnitt .lead { margin-top: 24px; }
.karte-abschnitt h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); }
.visitenkarte {
  background: hsl(40 33% 96%);
  color: hsl(28 18% 10%);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 2px 4px hsl(0 0% 0% / 0.35), 0 50px 80px -40px hsl(0 0% 0% / 0.9);
  max-width: 560px;
  width: 100%;
  justify-self: end;
}
.vk-name {
  display: flex;
  flex-direction: column;
  font: 500 1.75rem/1.1 var(--serif);
  font-variation-settings: "opsz" 28;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid hsl(38 40% 34% / 0.5);
}
.vk-name small {
  font: 450 0.875rem/1.4 var(--sans);
  letter-spacing: 0.02em;
  color: hsl(28 10% 33%);
  margin-top: 6px;
}
.visitenkarte label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(28 10% 30%);
  margin-bottom: 8px;
}
.vk-zeile { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.vk-zeile input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid hsl(28 18% 10%);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 500 1.5rem/1 var(--serif);
  font-variation-settings: "opsz" 11;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 2px;
}
.vk-zeile input::placeholder { color: hsl(28 8% 42%); letter-spacing: 0.08em; text-transform: none; font-size: 1.125rem; }
.vk-zeile input:focus { outline: none; border-bottom-width: 2px; border-bottom-color: hsl(36 40% 34%); }
.visitenkarte .knopf.dunkel { background: hsl(28 18% 10%); color: hsl(38 30% 94%); }

/* Kontakt */
.kontakt { padding-block: var(--abschnitt); }
.kontakt h2 { font-size: clamp(2.75rem, 5.6vw, 5rem); }
.kontakt .lead { margin-top: 28px; }
.nummer { margin-top: 28px; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.nummer span { color: var(--text); }
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px clamp(40px, 6vw, 96px);
  align-items: start;
}
.gebiet { margin: 0; }
.gebiet-karte { display: block; width: 100%; height: auto; overflow: visible; }
.gebiet-flaeche {
  fill: var(--flaeche-tief);
  stroke: var(--flaeche-tief);
  stroke-width: 72;
  stroke-linejoin: round;
}
.orte circle { fill: var(--text-leise); }
.orte text { font: 450 21px var(--sans); fill: var(--text-leise); }
.zuhause circle:first-child { fill: none; stroke: var(--messing); stroke-width: 1.5; }
.zuhause circle:nth-child(2) { fill: var(--text); }
.zuhause text { font: 600 27px var(--serif); font-variation-settings: "opsz" 11; fill: var(--text); }
.zuhause text.klein { font: 450 18px var(--sans); fill: var(--text-leise); }
.gebiet figcaption {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}
.gebiet-titel {
  font: 600 1.5rem/1.25 var(--serif);
  font-variation-settings: "opsz" 11;
}
.gebiet figcaption p:last-child { margin-top: 8px; color: var(--text-leise); max-width: 52ch; }

/* Fuß */
.fuss { padding-block: 56px calc(56px + env(safe-area-inset-bottom)); }
.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 24px 48px;
}
.fuss nav { display: flex; gap: 28px; margin-left: auto; }
.fuss nav a {
  color: var(--wand-leise);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.copy { color: var(--wand-leise); font-size: 0.875rem; width: 100%; padding-top: 24px; border-top: 1px solid var(--wand-linie); }

/* Schwebende Kontakt-Kapsel */
.kapsel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.kapsel.da {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.kapsel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  background: hsl(28 16% 9%);
  color: hsl(38 30% 92%);
  border: 1px solid hsl(38 30% 92% / 0.18);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 10px 30px -10px hsl(0 0% 0% / 0.5);
  transition: transform 160ms var(--ease-out);
}
.kapsel a:active { transform: scale(0.97); }
.kapsel-wa { padding: 0 24px 0 20px; }
.kapsel-mail { width: 52px; }
.kapsel svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Rechtstexte und 404 */
.seite { padding-block: clamp(56px, 8vw, 112px) var(--abschnitt); }
.rechtstext { max-width: 780px; }
.rechtstext h1 { font-size: clamp(1.875rem, 8vw, 4rem); margin-bottom: 40px; hyphens: auto; }
.rechtstext h2 { font-size: 1.625rem; margin: 48px 0 14px; }
.rechtstext h3 { font: 600 1.0625rem/1.4 var(--sans); margin: 28px 0 10px; }
.rechtstext p, .rechtstext ul { max-width: 68ch; margin: 0 0 14px; }
.rechtstext .leise { color: var(--text-leise); }
.seite .lead a { color: var(--text); }

/* Tablet */
@media (max-width: 1060px) {
  .vorteile .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .vorteile h2 { position: static; }
  .nav { display: none; }
  .kopf .knopf { margin-left: auto; }
}

/* Handy */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .kopf-zeile { padding-block: 16px; }
  .marke { font-size: 1.25rem; }

  .hero { padding-top: 32px; }
  .hero-raster { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .aktionen { gap: 8px 24px; }
  .aktionen .knopf { width: 100%; }
  .geraete { padding-right: 6%; }
  .schild-zeile { margin-right: 0; margin-top: 40px; }
  .handy-geraet { width: 27%; border-radius: 16px; }
  .handy-geraet .bildwechsel { border-radius: 10px; }
  .laptop-schirm { border-radius: 10px 10px 0 0; }
  .laptop-boden { height: 10px; }
  .schild b { font-size: 1.0625rem; }

  .kopfzeile { grid-template-columns: 1fr; }
  .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .vorteile h2 { position: static; }
  .liste div { grid-template-columns: minmax(0, 1fr); padding-block: 20px 24px; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); }
  .orte text { font-size: 24px; }
  .zuhause text.klein { font-size: 22px; }

  .ab-preise { grid-template-columns: 1fr; }
  .ab-preis { padding: 32px 0; }
  .ab-preis + .ab-preis { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; }
  .preise-fuss .knopf { width: 100%; }

  .reihe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand));
    padding: 0 var(--rand) 8px;
    gap: 16px;
    scrollbar-width: none;
  }
  .reihe li { flex: 0 0 66%; scroll-snap-align: start; scroll-margin-left: var(--rand); }

  .visitenkarte { justify-self: stretch; }
  .vk-zeile .knopf { width: 100%; }

  .fuss nav { margin-left: 0; }
}


/* Seite /entwurf: Code von der Visitenkarte */
.code-seite { min-height: 70vh; display: flex; align-items: center; padding-block: var(--abschnitt); }
.code-seite h1 { font-size: clamp(3rem, 7vw, 6rem); }
.code-seite .lead { margin-top: 28px; }
.vk-fehler { margin-top: 16px; color: hsl(8 62% 36%); font-size: 0.9375rem; }
.vk-fehler a { color: inherit; }
.code-seite .spaeter-titel { margin-top: clamp(40px, 6vw, 72px); font-size: clamp(2.25rem, 5vw, 4.5rem); max-width: 18ch; }
.code-seite .aktionen { margin-top: 36px; }