/* Rechtsanwältin Tanja Kalus, Gestaltungsentwurf UKMedia
   Farben: Tinte und Tisch aus dem dunkelblauen Blazer des Porträts, Marker aus dem Kanzleilogo (#f78c02). */
:root {
  --tinte: #172031;
  --tisch: #1c2a3e;
  --tisch-tief: #142030;
  --tisch-hell: #2a3c55;
  --papier: #ffffff;
  --grund: #eceff3;
  --marker: #f78c02;
  --marker-hell: #ffbe6b;
  --marker-text: #9a5200;
  --grau: #4f5a6b;
  --linie: #cfd6df;
  --kopf-h: 72px;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1240px;
  --display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --text: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5 { font-family: var(--display); margin: 0; font-weight: 700; line-height: 1.05; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }

.innen { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

.sprung {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--tinte); color: #fff; padding: 10px 16px; text-decoration: none;
}
.sprung:focus { top: 8px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 22px;
  font-family: var(--display); font-weight: 650; font-size: 1.05rem; line-height: 1.15;
  text-decoration: none; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; text-align: center;
}
.knopf-marker { background: var(--marker); color: var(--tinte); }
.knopf-marker:hover { background: #ff9d1f; }
.knopf-linie { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf-linie:hover { background: var(--tinte); color: #fff; }
.knopf-hell { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.knopf-hell:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.knopf-tinte { background: var(--tinte); color: #fff; }
.knopf-tinte:hover { background: #24324a; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { display: flex; align-items: center; gap: 28px; height: var(--kopf-h); }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.marke-bild { width: 46px; height: 46px; }
.marke-wort { display: flex; flex-direction: column; line-height: 1.1; }
.marke-oben { font-size: 1.05rem; color: var(--grau); letter-spacing: .01em; }
.marke-name { font-size: 1.05rem; font-weight: 650; color: var(--tinte); }
.kopf-nav { display: flex; gap: 26px; margin-left: auto; }
.kopf-nav a { text-decoration: none; font-size: 1.02rem; padding: 6px 0; border-bottom: 3px solid transparent; }
.kopf-nav a:hover { border-bottom-color: var(--marker); }
.kopf-tel {
  display: flex; flex-direction: column; text-decoration: none; line-height: 1.1;
  padding: 8px 14px; background: var(--tinte); color: #fff; border-radius: 3px;
}
.kopf-tel-wort { font-size: .8rem; color: var(--marker-hell); }
.kopf-tel-nr { font-family: var(--display); font-weight: 650; font-size: 1.05rem; white-space: nowrap; }
.kopf-tel:hover { background: #24324a; }

/* ---------- Einstieg ---------- */
.einstieg-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: min(calc(100svh - var(--kopf-h) - 150px), 720px);
}
.einstieg-text {
  align-self: center;
  padding: 56px 56px 56px max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
}
.einstieg-name { font-size: 1.2rem; color: var(--grau); margin-bottom: 18px; }
.einstieg h1 {
  font-size: clamp(2.7rem, 5.9vw, 5.7rem);
  font-weight: 720;
  font-stretch: 90%;
  letter-spacing: -.025em;
  line-height: .96;
}
.einstieg h1 span { display: block; }
.einstieg h1 .h1-gross { font-size: 1.32em; }
.einstieg-satz { margin-top: 28px; font-size: 1.28rem; line-height: 1.5; max-width: 34em; }
.einstieg-wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.einstieg-notiz { margin-top: 16px; color: var(--grau); font-size: 1rem; max-width: 34em; }
.einstieg-tisch {
  position: relative; overflow: hidden; min-height: 600px;
  background: radial-gradient(120% 90% at 30% 20%, #2b3d58 0%, var(--tisch) 55%, var(--tisch-tief) 100%);
}
.einstieg-blatt { position: absolute; left: 7%; top: 52px; width: min(66%, 470px); display: block; text-decoration: none; transition: transform .25s; }
.einstieg-blatt:hover { transform: translateY(-4px); }
.einstieg-blatt .blatt { font-size: .82rem; padding: 30px 30px 150px 50px; transform: rotate(-2.2deg); }
.einstieg-blatt .b-kopf { font-size: 1.2rem; margin-top: 10px; }
.einstieg-blatt .m-nr { left: -36px; }
.einstieg-bild {
  position: absolute; right: 7%; bottom: 76px; width: min(46%, 330px); margin: 0;
  background: #fff; padding: 10px 10px 0; transform: rotate(1.6deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 30px 50px -16px rgba(0,0,0,.7);
}
.einstieg-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.einstieg-bild figcaption { font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--tinte); padding: 10px 2px 12px; }
.einstieg-hinweis {
  position: absolute; left: 7%; bottom: 26px; color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.einstieg-hinweis:hover { color: var(--marker-hell); }

/* ---------- Schreibtisch ---------- */
.tisch {
  background-color: var(--tisch);
  background-image:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.06), transparent 60%),
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #e8edf3;
  padding: 72px 0 64px;
  overflow-x: clip;
}
.anliegen-blatt, .anliegen-info { min-width: 0; }
.tisch-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.tisch-kopf h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-stretch: 86%; letter-spacing: -.02em; color: #fff; line-height: .98; }
.tisch-kopf p { font-size: 1.15rem; color: #c9d2de; max-width: 34em; }

.schritt { display: flex; align-items: center; gap: 12px; margin: 44px 0 14px; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.schritt-zwei { margin-top: 36px; }
.schritt-nr { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marker); color: var(--tinte); font-size: 1rem; font-weight: 700; }
html:not(.js) .schritt { display: none; }
.seiten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0; max-width: 100%; }
.seite-knopf {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  display: inline-flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,.07); color: #fff; border: 2px solid #8fa0b8; border-radius: 6px;
  padding: 14px 22px 14px 16px; cursor: pointer; min-height: 56px;
  transition: background .15s, border-color .15s;
}
.seite-knopf::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c9d2de; background: transparent; box-sizing: border-box;
}
.seite-knopf:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.seite-knopf[aria-pressed="true"] { background: var(--marker); border-color: var(--marker); color: var(--tinte); }
.seite-knopf[aria-pressed="true"]::before { border-color: var(--tinte); background: radial-gradient(circle, var(--tinte) 0 5px, transparent 6px); }

.seite { margin-top: 28px; }
.seite-titel { font-size: 1.6rem; color: #fff; margin: 48px 0 16px; }
.js .seite-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .seite[hidden] { display: none; }
html:not(.js) .seiten, html:not(.js) .ablage { display: none; }

/* Ablage: kleine Blätter als Auswahl */
.ablage { display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 6px; }
.ablage-blatt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 6px 4px; cursor: pointer; color: #dfe6ef;
  width: 112px; font: inherit;
}
.mini {
  width: 58px; height: 76px; background: #f4f6f8; border-radius: 1px; padding: 9px 8px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
  transform: rotate(-2deg); transition: transform .2s ease, background-color .2s ease;
}
.ablage-blatt:nth-child(2n) .mini { transform: rotate(1.5deg); }
.ablage-blatt:nth-child(3n) .mini { transform: rotate(-.5deg); }
.mini i { display: block; height: 3px; background: #c6ccd5; border-radius: 1px; }
.mini i:nth-child(1) { width: 50%; }
.mini i:nth-child(2) { width: 90%; height: 4px; background: #7d8796; }
.mini i:nth-child(4) { width: 70%; }
.ablage-wort { hyphens: manual; overflow-wrap: anywhere; font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.15; text-align: center; padding-bottom: 4px; border-bottom: 3px solid transparent; }
.ablage-blatt:hover .mini { transform: translateY(-4px) rotate(0deg); }
.ablage-blatt[aria-selected="true"] { color: #fff; }
.ablage-blatt[aria-selected="true"] .mini { background: #fff; transform: translateY(-6px) rotate(0deg); }
.ablage-blatt[aria-selected="true"] .mini i:nth-child(2) { background: var(--marker); }
.ablage-blatt[aria-selected="true"] .ablage-wort { border-bottom-color: var(--marker); }

/* Ein Anliegen: Blatt links, Erklärung rechts */
.anliegen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 72px;
  margin-top: 30px;
  align-items: start;
}
html:not(.js) .anliegen { margin-top: 56px; }
.js .anliegen[hidden] { display: none; }

.blatt {
  position: relative;
  background: var(--papier);
  color: #2b3342;
  font-family: var(--text);
  font-size: .9rem;
  line-height: 1.45;
  padding: 40px 44px 44px 56px;
  transform: rotate(-.7deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 26px 50px -18px rgba(0,0,0,.65);
  background-image:
    linear-gradient(to bottom, transparent calc(33.3% - 1px), rgba(23,32,49,.06) 33.3%, transparent calc(33.3% + 2px)),
    linear-gradient(to bottom, transparent calc(66.6% - 1px), rgba(23,32,49,.06) 66.6%, transparent calc(66.6% + 2px));
}
.blatt--tabelle, .blatt--vertrag { transform: rotate(.6deg); }
.blatt .z { display: block; width: var(--w); height: .52em; background: #d7dce3; border-radius: 2px; margin: .62em 0; }
.blatt .z-in { display: inline-block; vertical-align: middle; margin: 0 0 0 .3em; width: var(--w); }
.b-abs { font-size: .7rem; color: #7a8391; text-decoration: underline; text-underline-offset: 2px; }
.b-an { width: 52%; margin: 10px 0 26px; }
.b-datum { text-align: right; color: #4f5868; }
.b-kopf { font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: var(--tinte); margin: 14px 0 16px; }
.b-betreff { font-weight: 700; font-size: .95rem; color: var(--tinte); margin: 20px 0 14px; max-width: 30em; }
.b-anrede { margin-bottom: 6px; }
.b-echt { margin: 6px 0; max-width: 34em; }
.b-echt .z-in { margin: 0 .25em; }
.b-gruss { margin-top: 14px; }
.b-text { margin: 0; }
.b-par { font-weight: 700; color: var(--tinte); margin: 14px 0 0; }
.b-zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 8px 0; }
.b-zeile .z { width: var(--w); max-width: 45%; flex-shrink: 1; margin: 0; }
.b-tab { margin: 12px 0; font-size: .74rem; }
.b-reihe { display: grid; grid-template-columns: 1.7fr repeat(var(--sp), 1fr); gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #e4e8ed; }
.b-th { font-weight: 700; color: var(--tinte); border-bottom: 1.5px solid #9aa3b0; }
.b-reihe span:not(:first-child) { text-align: center; }
.b-reihe .z { margin: 0 auto; }
.b-kreuz { font-size: .8rem; color: #23408e; }
.b-sig { color: #23408e; margin-top: 14px; }
.b-sig svg { width: 130px; height: 34px; }
.b-anlage { font-style: italic; font-size: .76rem; color: #4f5868; margin-top: 10px; }

/* Markierungen mit dem Textmarker */
.m { position: relative; }
.m + .m, .m + * , * + .m { margin-top: 12px; }
.blatt > .b-an + .m { margin-top: 0; }
.m::before {
  content: ""; position: absolute; inset: -3px -10px -3px -8px; z-index: 0;
  background: rgba(247,140,2,.36);
  border-radius: 3px 8px 4px 9px;
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
  mix-blend-mode: multiply;
}
.m > *:not(.m-nr) { position: relative; z-index: 1; }
.m-nr {
  position: absolute; left: -40px; top: 50%; translate: 0 -50%; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marker); color: var(--tinte);
  font-family: var(--display); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center;
}
.js .anliegen .m { --p: 0; }
.js .anliegen.ist-an .m { --p: 1; }
.js .anliegen .m::before { transition: transform .5s cubic-bezier(.3,.7,.2,1); transition-delay: calc(var(--i, 0) * .32s + .15s); }
.js .anliegen .m-nr { opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i, 0) * .32s + .35s); }
.js .anliegen.ist-an .m-nr { opacity: 1; }

.anliegen-blatt.kommt { animation: hinlegen .45s cubic-bezier(.2,.75,.25,1); }
@keyframes hinlegen {
  from { opacity: 0; transform: translateY(26px) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}

.anliegen-info { max-width: 34em; padding-top: 6px; }
.anliegen-titel { font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-stretch: 90%; color: #fff; letter-spacing: -.01em; }
.anliegen-gebiet { margin-top: 12px; color: var(--marker-hell); font-size: 1rem; }
.anliegen-text { margin-top: 18px; font-size: 1.12rem; }
.anliegen-info h5 { font-size: 1.08rem; color: #fff; margin: 28px 0 10px; font-weight: 650; }
.marken { list-style: none; counter-reset: mk; padding: 0; margin: 0; display: grid; gap: 10px; }
.marken li { counter-increment: mk; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.marken li::before {
  content: counter(mk); width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--marker); color: var(--tinte);
  font-family: var(--display); font-weight: 700; font-size: .8rem; display: grid; place-items: center;
}
.mitbringen { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mitbringen li { padding-left: 26px; position: relative; }
.mitbringen li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 12px; border: 2px solid #9fb0c6; border-radius: 2px; }
.anliegen-schritt { margin-top: 28px; padding-left: 16px; border-left: 4px solid var(--marker); color: #fff; font-size: 1.12rem; font-weight: 600; }
.anliegen-wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.seite-zusatz { margin-top: 48px; padding: 26px 28px; background: var(--tisch-tief); border-left: 4px solid var(--marker); max-width: 52em; }
.seite-zusatz h4 { font-size: 1.35rem; color: #fff; }
.seite-zusatz p { margin-top: 8px; color: #d4dce6; }
.tisch-hinweis { margin-top: 48px; font-size: .95rem; color: #a9b5c4; }

/* ---------- Rechtsgebiete ---------- */
.gebiete { background: var(--grund); padding: 96px 0; }
.gebiete-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; }
.gebiete-kopf h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); font-stretch: 86%; letter-spacing: -.02em; line-height: 1; }
.gebiete-kopf p { margin-top: 20px; color: var(--grau); max-width: 26em; }
.gebiete-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; align-content: start; }
.gebiete-liste li { border-top: 2px solid var(--tinte); }
.gebiete-liste a {
  display: block; padding: 14px 0 22px; text-decoration: none;
  font-family: var(--display); font-weight: 560; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.18;
}
.gebiete-liste a:hover { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.gebiete-koop { grid-column: 2; font-size: 1.05rem; color: var(--grau); max-width: 40em; }

/* ---------- Arbeitsweise ---------- */
.arbeitsweise { padding: 104px 0 96px; }
.zitat { margin: 0 0 88px; max-width: 1080px; }
.zitat blockquote { margin: 0; }
.zitat blockquote p {
  font-family: var(--display); font-weight: 600; font-stretch: 88%;
  font-size: clamp(2rem, 4.6vw, 4.3rem); line-height: 1.02; letter-spacing: -.02em;
  text-indent: -.42em;
}
.zitat figcaption { margin-top: 24px; font-size: 1.1rem; color: var(--grau); padding-left: 16px; border-left: 4px solid var(--marker); }
.arbeit-titel { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin-bottom: 30px; }
.arbeit-raster { display: grid; gap: 0; }
.arbeit-punkt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 72px; border-top: 6px solid var(--tinte); padding: 22px 0 40px; }
.arbeit-punkt p { font-size: 1.15rem; max-width: 36em; }
.arbeit-punkt h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin-bottom: 14px; }
.arbeit-punkt p { color: #2e3a4d; }

/* ---------- Person ---------- */
.person { background: var(--grund); padding: 96px 0; }
.person-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 80px; align-items: start; }
.person-bild { margin: 0; position: sticky; top: calc(var(--kopf-h) + 24px); }
.person-bild img { width: 100%; }
.person-text h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); font-stretch: 84%; letter-spacing: -.025em; }
.person-satz { margin-top: 22px; font-size: 1.22rem; max-width: 32em; }
.werdegang-titel { font-size: 1.4rem; margin: 48px 0 18px; }
.werdegang { list-style: none; margin: 0; padding: 0; }
.werdegang li { display: grid; grid-template-columns: 9.5em 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--linie); }
.werdegang .jahr { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.werdegang li:first-child .jahr { color: var(--marker-text); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--marker); padding: 96px 0; color: var(--tinte); }
.kontakt :focus-visible { outline-color: var(--tinte); }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
.kontakt-text h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.kontakt-nummer a {
  display: inline-block; margin-top: 6px; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-stretch: 80%;
  font-size: clamp(2.9rem, 8.2vw, 7.4rem); letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
.kontakt-nummer a:hover { text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: 8px; }
.kontakt-satz { margin-top: 22px; font-size: 1.15rem; max-width: 30em; }
.kontakt-daten { margin: 32px 0 0; display: grid; gap: 14px; }
.kontakt-daten div { display: grid; grid-template-columns: 6em 1fr; gap: 16px; }
.kontakt-daten dt { font-weight: 700; }
.kontakt-daten dd { margin: 0; }
.kontakt-route { margin-top: 28px; }

.anfrage { background: var(--papier); padding: 34px 34px 30px; box-shadow: 0 30px 60px -30px rgba(70,35,0,.55); }
.anfrage h3 { font-size: 1.7rem; }
.anfrage-demo { margin-top: 6px; font-size: .95rem; color: var(--marker-text); font-weight: 600; }
.anfrage fieldset { border: 0; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.anfrage legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.anfrage fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.anfrage input[type="radio"] { width: 18px; height: 18px; accent-color: var(--tinte); }
.feld { display: grid; gap: 6px; margin-top: 18px; font-weight: 600; font-size: 1rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-weight: 400; font-size: 1.05rem; color: var(--tinte);
  border: 1.5px solid #8b95a4; border-radius: 3px; padding: 10px 12px; background: #fff; width: 100%; min-height: 46px;
}
.feld textarea { resize: vertical; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.anfrage .knopf { margin-top: 22px; }
.anfrage-meldung { margin-top: 14px; font-weight: 600; }
.anfrage-meldung:empty { display: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: #c9d2de; padding: 40px 0 44px; font-size: .98rem; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; }
.fuss-links { display: flex; gap: 22px; }
.fuss-links a { color: #fff; }
.fuss-hinweis { flex-basis: 100%; color: #95a2b4; font-size: .92rem; }

.leiste { display: none; }

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1100px) {
  .kopf-nav { display: none; }
  .kopf-tel { margin-left: auto; }
  .anliegen { gap: 36px 44px; }
  .blatt { padding: 32px 30px 36px 46px; }
}
@media (max-width: 900px) {
  .einstieg-raster { grid-template-columns: 1fr; min-height: 0; }
  .einstieg-tisch { order: -1; min-height: 0; height: 468px; }
  .einstieg-blatt { left: 16px; top: 22px; width: 68%; }
  .einstieg-blatt .blatt { font-size: .68rem; padding: 18px 16px 22px 38px; }
  .einstieg-blatt .m-nr { left: -30px; width: 20px; height: 20px; font-size: .7rem; }
  .einstieg-blatt .b-kopf { font-size: .95rem; }
  .einstieg-bild { right: 16px; bottom: 70px; width: 45%; padding: 7px 7px 0; }
  .einstieg-bild figcaption { font-size: .8rem; padding: 7px 1px 8px; }
  .einstieg-hinweis { left: 16px; bottom: 18px; font-size: .98rem; }
  .einstieg-text { padding: 32px var(--rand) 44px; }
  .tisch-kopf { grid-template-columns: 1fr; }
  .anliegen { grid-template-columns: 1fr; }
  .anliegen-blatt { max-width: 560px; }
  .gebiete-raster, .person-raster, .kontakt-raster { grid-template-columns: 1fr; }
  .gebiete-koop { grid-column: auto; }
  .arbeit-punkt { grid-template-columns: 1fr; padding-bottom: 32px; }
  .person-bild { position: static; max-width: 420px; }
}
@media (max-width: 760px) {
  :root { --kopf-h: 64px; }
  body { font-size: 1.0625rem; padding-bottom: 58px; }
  .marke-bild { width: 40px; height: 40px; }
  .marke-oben, .marke-name { font-size: .98rem; }
  .kopf-tel { padding: 7px 12px; }
  .kopf-tel-nr { display: none; }
  .kopf-tel-wort { font-family: var(--display); font-weight: 650; font-size: 1rem; color: #fff; }
  .einstieg-name { font-size: 1.05rem; margin-bottom: 12px; }
  .einstieg h1 span { display: block; }
.einstieg h1 .h1-gross { font-size: 1.32em; }
.einstieg-satz { font-size: 1.12rem; margin-top: 20px; }
  .einstieg-wege .knopf { flex: 1 1 100%; }
  .tisch { padding: 56px 0 48px; }
  .seiten { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .ablage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ablage-blatt { width: auto; padding: 8px 2px 4px; }
  .mini { width: 44px; height: 58px; padding: 7px 6px; gap: 5px; }
  .ablage-wort { font-size: .92rem; }
  .blatt { font-size: .78rem; padding: 26px 18px 30px 40px; min-height: 0; transform: rotate(-.4deg); }
  .blatt--tabelle, .blatt--vertrag { transform: rotate(.4deg); }
  .m-nr { left: -32px; width: 22px; height: 22px; }
  .b-tab { font-size: .66rem; }
  .b-reihe { gap: 4px; }
  .anliegen-wege .knopf { flex: 1 1 100%; }
  .gebiete, .person, .kontakt { padding: 64px 0; }
  .arbeitsweise { padding: 64px 0; }
  .zitat { margin-bottom: 56px; }
  .zitat blockquote p { text-indent: 0; }
  .gebiete-liste { grid-template-columns: 1fr; }
  .werdegang li { grid-template-columns: 1fr; gap: 2px; }
  .kontakt-daten div { grid-template-columns: 1fr; gap: 0; }
  .anfrage { padding: 26px 18px 24px; }
  .feld-paar { grid-template-columns: 1fr; }
  .leiste {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--tinte); border-top: 3px solid var(--marker);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .leiste a {
    color: #fff; text-decoration: none; text-align: center; padding: 15px 4px;
    font-family: var(--display); font-weight: 650; font-size: 1rem;
  }
  .leiste a + a { border-left: 1px solid rgba(255,255,255,.18); }
  .leiste a:first-child { background: var(--marker); color: var(--tinte); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}