/* 147 – Heraldik
   Flächenheraldik auf Silber: Tinkturen Gold, Rot, Blau, Grün, Schwarz; Heroldsbilder
   (Schildhaupt, Pfahl, Schrägbalken, Balken, Bord) gliedern die Seite, Schnittlinien
   (Zinnen-, Wellen-, Spitzenschnitt) trennen die Abschnitte. Farbflächen tragen ihre
   Petra-Sancta-Schraffur als feine Textur. */

:root {
  --or: #d9a520;
  --gu: #b8242b;
  --az: #1f4e9b;
  --ve: #1f7a4a;
  --sa: #1a1a1a;
  --ar: #ffffff;
  --ink: #1a1a1a;
  --mute: #4b4b4f;
  --disp: 'Cinzel Decorative', 'Cinzel', 'Trajan Pro', Georgia, serif;
  --caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --text: 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
  --pad: clamp(16px, 4.4vw, 64px);
  --max: 1240px;
  --damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23e8e8ed' stroke-width='1'%3E%3Cpath d='M36 0 72 36 36 72 0 36Z'/%3E%3Cpath d='M36 22c6 5 6 23 0 28-6-5-6-23 0-28ZM22 36c5-6 23-6 28 0-5 6-23 6-28 0Z'/%3E%3C/g%3E%3Cg fill='%23e4e4ea'%3E%3Ccircle cx='0' cy='0' r='2.6'/%3E%3Ccircle cx='72' cy='0' r='2.6'/%3E%3Ccircle cx='0' cy='72' r='2.6'/%3E%3Ccircle cx='72' cy='72' r='2.6'/%3E%3Ccircle cx='36' cy='36' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  /* Petra-Sancta-Texturen */
  --h-gu: repeating-linear-gradient(90deg, rgba(0,0,0,.075) 0 1px, transparent 1px 7px);
  --h-az: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 7px);
  --h-ve: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 8px);
  --h-or: radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1.6px);
  --h-sa: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ar); color: var(--ink); font: 400 19px/1.55 var(--text); font-variant-numeric: lining-nums; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.14; }
h3 { font-size: 20px; line-height: 1.22; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: var(--az); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gu); }
:focus-visible { outline: 3px solid var(--az); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--sa); color: #fff; padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

.kicker { text-wrap: balance; display: block; font: 600 14.5px/1.35 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--gu); margin-bottom: 14px; }
.kicker--light { color: #fff; }
.kicker--dark { color: var(--sa); }

/* ---------- Schaltflächen: Tinkturflächen mit Kontur und Silberfaden ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px 11px; font: 700 14px/1.2 var(--caps); letter-spacing: .06em; text-decoration: none; text-align: center; border: 2px solid var(--sa); box-shadow: inset 0 0 0 3px var(--fill), inset 0 0 0 4.5px rgba(255,255,255,.9); background: var(--fill); color: var(--txt); transition: background-color .18s, color .18s, box-shadow .18s; }
.btn--gules { --fill: var(--gu); --txt: #fff; }
.btn--argent { --fill: #fff; --txt: var(--sa); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--sa); }
.btn--or { --fill: var(--or); --txt: var(--sa); }
.btn:hover { --fill: var(--sa); --txt: #fff; color: #fff; }
.btn--or:hover { --fill: #fff; --txt: var(--sa); color: var(--sa); }

/* ---------- Kopf: das Schildhaupt ---------- */
.chief { position: relative; z-index: 20; background: var(--h-az), var(--az); color: #fff; }
.chief::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 0H48V6H24V14H0Z' fill='%231f4e9b'/%3E%3Cpath d='M0 13H24V5H48' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 48px 14px; pointer-events: none; }
.chief__in { max-width: calc(var(--max) + 80px); margin: 0 auto; padding-inline: var(--pad); height: 76px; display: flex; align-items: flex-start; gap: 32px; }
.plaque { flex: none; position: relative; z-index: 3; width: 118px; height: 136px; margin-top: 10px; padding-top: 17px; display: flex; justify-content: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 120'%3E%3Cpath d='M2 2H102V56C102 90 82 108 52 118 22 108 2 90 2 56Z' fill='%23fff' stroke='%231a1a1a' stroke-width='2.5'/%3E%3Cpath d='M8 8H96V56C96 86 78 102 52 111 26 102 8 86 8 56Z' fill='none' stroke='%23d9a520' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; }
.plaque img { width: 84px; height: auto; }
.plaque:focus-visible { outline-color: var(--or); }
.menu { display: none; }
.nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 34px; height: 76px; }
.nav__list { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav__list a { display: block; padding: 6px 0 4px; color: #fff; text-decoration: none; font: 700 14px/1.2 var(--caps); letter-spacing: .06em; border-bottom: 2px solid transparent; }
.nav__list a:hover { color: #fff; border-color: var(--or); }
.nav a:focus-visible, .chief .menu:focus-visible { outline-color: var(--or); }
.nav__end { display: flex; align-items: center; gap: 22px; }
.tel { color: #fff; text-decoration: none; font: 500 19px/1 var(--text); letter-spacing: .02em; white-space: nowrap; }
.tel:hover { color: #fff; text-decoration: underline; }
.lang { display: grid; place-items: center; width: 40px; height: 40px; background: var(--or); color: var(--sa); border: 2px solid var(--sa); box-shadow: 0 0 0 2px #fff; font: 700 13px/1 var(--caps); text-decoration: none; }
.lang:hover { background: #fff; color: var(--sa); }

/* ---------- Hero: Wappen zwischen Text als Schildhalter ---------- */
.hero { background: var(--damask) center top / 72px 72px, var(--ar); padding: 52px var(--pad) 56px; min-height: min(calc(100vh - 90px), 860px); display: grid; align-items: center; }
.hero__grid { width: 100%; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.15fr) clamp(300px, 32vw, 460px) minmax(0,.85fr); gap: clamp(28px, 2.5vw, 36px); align-items: center; }
.hero__dexter { text-align: right; }
.hero h1 { font-size: clamp(30px, calc((100vw - 660px) * .0515), 40px); line-height: 1.18; letter-spacing: .01em; text-wrap: balance; }
.hero h1::after { content: ''; display: block; width: 96px; height: 4px; margin: 26px 0 0 auto; background: linear-gradient(90deg, var(--az) 0 25%, var(--or) 25% 50%, var(--gu) 50% 75%, var(--ve) 75%); outline: 1.5px solid var(--sa); }
.hero__arms .arms { width: 100%; height: auto; overflow: visible; }
.motto { font-family: var(--text); font-weight: 600; letter-spacing: .085em; text-transform: uppercase; }
.lead { font-size: 20.5px; line-height: 1.52; max-width: 36ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 24px; }
.avail span { white-space: nowrap; }
.avail { display: flex; align-items: center; gap: 10px; font-size: 16.5px; color: var(--mute); }
.avail__i { width: 20px; height: 20px; flex: none; }

/* ---------- Schnittlinien ---------- */
.cut { height: 18px; background-repeat: repeat-x; background-position: 0 0; }
.cut--line { height: 16px; margin-top: -8px; position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 8Q12 0 24 8T48 8' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); background-size: 48px 16px; }
.cut--wave-or { height: 20px; background-color: var(--ar); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20'%3E%3Cpath d='M0 10Q16 0 32 10T64 10V20H0Z' fill='%23d9a520'/%3E%3Cpath d='M0 10Q16 0 32 10T64 10' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); background-size: 64px 20px; }
.cut--dance-or { height: 18px; background-color: var(--or); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 18L18 2 36 18Z' fill='%23fff'/%3E%3Cpath d='M0 18L18 2 36 18' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); background-size: 36px 18px; }
.cut--wave-sa { height: 20px; background-color: var(--ar); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='20'%3E%3Cpath d='M0 10Q16 0 32 10T64 10V20H0Z' fill='%231a1a1a'/%3E%3C/svg%3E"); background-size: 64px 20px; }

/* ---------- Schwerpunkt: der Pfahl ---------- */
.focus { background: var(--ar); }
.pale { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); display: grid; grid-template-columns: minmax(0,1fr) 260px minmax(0,1fr); column-gap: clamp(32px, 4.4vw, 68px); grid-template-areas: "head stats intro" "dex stats sin"; }
.pale__head { grid-area: head; text-align: right; padding-top: 104px; padding-bottom: 56px; }
.pale__intro { grid-area: intro; padding-top: 110px; padding-bottom: 56px; font-size: 20px; line-height: 1.55; max-width: 44ch; align-self: start; }
.pale__stats { grid-area: stats; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 44px; padding: 96px 12px 72px; background: var(--h-gu), var(--gu); border-inline: 3px solid var(--sa); box-shadow: inset 3px 0 0 #fff, inset -3px 0 0 #fff; color: #fff; text-align: center; }
.bezant { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bezant b { display: grid; place-items: center; width: 148px; height: 148px; border-radius: 50%; background: var(--h-or) 0 0 / 7px 7px, var(--or); border: 3px solid var(--sa); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sa); color: var(--sa); font: 700 52px/1 var(--text); letter-spacing: 0; padding-bottom: 4px; }
.bezant--small b { font-size: 30px; }
.bezant span { max-width: 200px; font-size: 17px; line-height: 1.35; font-weight: 500; }
.cases { display: grid; gap: 40px; align-content: start; padding-bottom: 88px; }
.cases--dexter { grid-area: dex; }
.cases--sinister { grid-area: sin; }
.cases li { display: grid; gap: 18px; align-items: start; }
.cases--dexter li { grid-template-columns: 1fr 34px; text-align: right; }
.cases--dexter .tinct { order: 2; }
.cases--sinister li { grid-template-columns: 34px 1fr; }
.tinct { width: 34px; height: 41px; margin-top: 2px; }
.cases h3 { margin-bottom: 6px; }
.cases p { font-size: 18.5px; line-height: 1.5; color: #2c2c30; }

/* ---------- Beispielroute: der Schrägbalken ---------- */
.bend { position: relative; height: 560px; }
.bend__field { position: absolute; inset: 0; }
.bend__pale { position: absolute; left: calc(50% - 130px); width: 260px; top: 0; height: 52%; background: var(--h-gu), var(--gu); border-inline: 3px solid var(--sa); box-shadow: inset 3px 0 0 #fff, inset -3px 0 0 #fff; }
.bend__band { position: absolute; inset: 0; background: var(--h-az), var(--az); clip-path: polygon(0 12%, 100% 56%, 100% 88%, 0 44%); }
.bend__legs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bend__legs line { stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.bend__legs .car { stroke-dasharray: 9 9; }
.bend__legs .edge { stroke: var(--sa); stroke-width: 3; }
.bend__codes li { position: absolute; left: calc(var(--x) * 100%); top: calc(28% + 44% * var(--x)); transform: translate(-50%, -50%); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--h-or) 0 0 / 7px 7px, var(--or); border: 3px solid var(--sa); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sa); font: 900 19px/1 var(--caps); color: var(--sa); letter-spacing: .03em; }
.bend__head { position: absolute; z-index: 2; top: 50px; left: calc(50% + 130px + clamp(32px, 4.4vw, 68px)); right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
.bend__text { display: block; font-size: 22px; line-height: 1.45; font-style: italic; }
.bend__note { position: absolute; z-index: 2; bottom: 52px; left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); width: min(360px, 30%); font-style: italic; font-size: 18.5px; color: var(--mute); padding-left: 18px; border-left: 4px solid var(--gu); }

/* ---------- Leistungen: sechs Schilde auf Gold ---------- */
.services { background: var(--h-or) 0 0 / 9px 9px, var(--or); padding: 88px 0 116px; }
.sec-head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.sec-intro { margin-top: 18px; font-size: 20.5px; line-height: 1.5; }
.arms-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px clamp(32px, 4vw, 64px); }
.arms-row li { text-align: center; }
.escut { width: 148px; height: 181px; margin: 0 auto 24px; filter: drop-shadow(4px 5px 0 rgba(26,26,26,.18)); }
.arms-row h3 { font-size: 21px; margin-bottom: 10px; }
.arms-row p { font-size: 18.5px; line-height: 1.5; max-width: 34ch; margin: 0 auto; }

/* ---------- Ablauf: der gezinnte Balken ---------- */
.process { padding: 96px 0 104px; }
.fess { position: relative; background: var(--h-az), var(--az); color: #fff; padding: 76px 0 84px; border-block: 0; }
.fess::before, .fess::after { content: ''; position: absolute; left: 0; right: 0; height: 16px; background-repeat: repeat-x; background-size: 48px 16px; }
.fess::before { bottom: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 16V9H24V1H48V16Z' fill='%231f4e9b'/%3E%3Cpath d='M0 9H24V1H48' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); }
.fess::after { top: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 0H48V7H24V15H0Z' fill='%231f4e9b'/%3E%3Cpath d='M0 15H24V7H48' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); }
.sec-head--light { margin-bottom: 56px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3.4vw, 52px); }
.steps li { position: relative; }
.steps__n { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; background: var(--or); color: var(--sa); border: 3px solid var(--sa); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sa); font: 700 30px/1 var(--text); padding-bottom: 3px; }
.steps h3 { font-size: 21px; margin-bottom: 8px; }
.steps p { font-size: 18.5px; line-height: 1.5; }
.fess :focus-visible { outline-color: var(--or); }

/* ---------- Über uns: Foto im Schild mit gestücktem Bord ---------- */
.about { padding: 24px 0 120px; }
.about__grid { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: clamp(40px, 7vw, 104px); align-items: center; }
.portrait { position: relative; margin: 0; width: 100%; aspect-ratio: 300 / 360; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; clip-path: url(#clip-shield); }
.portrait__bord { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.b-white { stroke: #fff; stroke-width: 14; }
.b-red { stroke: var(--gu); stroke-width: 14; stroke-dasharray: 1 1; }
.b-line { stroke: var(--sa); stroke-width: 2.6; }
.b-line--in { stroke-width: 2; }
.about__text h2 { margin-bottom: 24px; }
.body { font-size: 20.5px; line-height: 1.55; max-width: 58ch; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; margin-top: 34px; padding-top: 28px; border-top: 2px solid var(--sa); }
.feats li { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 500; }
.feats svg { width: 22px; height: 22px; flex: none; }

/* ---------- Kontakt: das Banner ---------- */
.contact { padding: 16px 0 136px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.banner { position: relative; padding-top: 22px; filter: drop-shadow(2px 0 0 var(--sa)) drop-shadow(-2px 0 0 var(--sa)) drop-shadow(0 2px 0 var(--sa)) drop-shadow(0 -1px 0 var(--sa)); }
.banner::before { content: ''; position: absolute; top: 2px; left: -26px; right: -26px; height: 14px; border-radius: 7px; background: radial-gradient(circle at 7px 7px, var(--or) 6px, transparent 6.6px), radial-gradient(circle at calc(100% - 7px) 7px, var(--or) 6px, transparent 6.6px), linear-gradient(#3a3a3a, var(--sa)); }
.banner__cloth { position: relative; background: var(--h-ve), var(--ve); color: #fff; padding: 52px clamp(26px, 3.6vw, 52px) 112px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 66px), 0 100%); }
.banner__cloth::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 22px, transparent 22px 44px); }
.banner__arms { position: absolute; top: 40px; right: clamp(24px, 3.4vw, 48px); width: 66px; height: 79px; }
.banner h2 { margin-bottom: 20px; padding-right: 84px; color: #fff; }
.banner .body { margin-bottom: 30px; }
.banner :focus-visible { outline-color: #fff; }
.cdata { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; margin: 22px 0 0; }
.cdata div { border-top: 2px solid var(--sa); padding-top: 14px; }
.cdata div:nth-child(5) { grid-column: 1 / -1; }
.cdata dt { font: 700 13.5px/1.3 var(--caps); letter-spacing: .07em; color: var(--gu); margin-bottom: 8px; }
.cdata dd { margin: 0; font-size: 21px; line-height: 1.45; }
.cdata small { display: block; margin-top: 4px; font-size: 16.5px; color: var(--mute); }

/* ---------- Fuß ---------- */
.foot { background: var(--h-sa), var(--sa); color: #e9e9ec; padding: 48px var(--pad) 84px; }
.foot__in { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 18px 44px; align-items: center; }
.plaque--foot { margin: 0; grid-row: span 2; }
.foot__brand { font: 700 16px/1.3 var(--caps); letter-spacing: .04em; color: #fff; margin-bottom: 6px; }
.foot__addr p:not(.foot__brand) { font-size: 17.5px; }
.foot a { color: #fff; }
.foot a:hover { color: var(--or); }
.foot :focus-visible { outline-color: var(--or); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 17.5px; justify-content: flex-end; }
.foot__copy { grid-column: 2 / -1; font-size: 15.5px; color: #bdbdc4; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); }

/* ---------- Rechtsseiten ---------- */
.legal { background: var(--ar); padding-bottom: 120px; }
.legal__head { background: var(--damask) center / 72px 72px, var(--ar); text-align: center; padding: 70px var(--pad) 52px; border-bottom: 0; }
.legal__emblem { width: 70px; height: 84px; margin: 0 auto 26px; }
.back { display: inline-block; margin-bottom: 26px; font-size: 17px; }
.legal__head h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.18; max-width: 22ch; margin: 0 auto; overflow-wrap: break-word; hyphens: manual; }
.legal-body { max-width: 70ch; margin: 0 auto; padding: 56px var(--pad) 0; box-sizing: content-box; font-size: 19px; line-height: 1.62; }
.legal-body h2 { position: relative; font-family: var(--caps); font-kerning: auto; font-size: 21px; line-height: 1.3; margin: 2.2em 0 .7em; padding-left: 30px; }
.legal-body h2::before { content: ''; position: absolute; left: 2px; top: .22em; width: 16px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M2 2H38V22C38 35 30 42 20 46 10 42 2 35 2 22Z' fill='%23b8242b' stroke='%231a1a1a' stroke-width='3'/%3E%3C/svg%3E") no-repeat center / contain; }
.legal-body h2:first-child, .legal-body .legal-note + h2 { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 1em; }
.legal-body ul { padding-left: 1.3em; list-style: none; }
.legal-body li { position: relative; margin-bottom: .4em; }
.legal-body li::before { content: ''; position: absolute; left: -1.05em; top: .58em; width: 7px; height: 7px; background: var(--or); outline: 1.5px solid var(--sa); transform: rotate(45deg); }
.legal-body a { overflow-wrap: anywhere; }
.legal-note { border: 2px solid var(--az); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--az); padding: 16px 20px; font-style: italic; margin-bottom: 2.2em !important; }
.legal-address { border-left: 6px solid var(--gu); padding: 4px 0 4px 20px; }

/* ---------- Bewegung (nur ohne reduzierte Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .arms__crest, .arms__mantle, .arms__motto, .arms__shield, .arms__helm { transform-box: fill-box; }
  .arms__shield { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 100%; }
  .arms__helm { animation: rise .9s .25s cubic-bezier(.2,.7,.2,1) both; }
  .arms__crest { animation: crest 1s .45s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 100%; }
  .arms__mantle { animation: mantle 1.2s .35s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 20%; }
  .arms__motto { animation: unfurl .9s .8s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 50%; }
  html.rv .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  html.rv .reveal.in { opacity: 1; transform: none; }
  html.rv .bend__codes li.reveal { transform: translate(-50%, -50%) scale(.6); }
  html.rv .bend__codes li.reveal.in { transform: translate(-50%, -50%); }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes crest { from { opacity: 0; transform: scale(.7) translateY(20px); } }
@keyframes mantle { from { opacity: 0; transform: scaleX(.55); } }
@keyframes unfurl { from { opacity: 0; transform: scaleX(.2); } }

/* ---------- Responsiv ---------- */
@media (max-width: 1240px) {
  .hero__grid { grid-template-columns: minmax(280px, 380px) 1fr; grid-template-areas: "arms dex" "arms sin"; column-gap: clamp(36px, 5vw, 64px); row-gap: 26px; align-items: end; }
  .hero__arms { grid-area: arms; align-self: center; }
  .hero__dexter { grid-area: dex; text-align: left; }
  .hero__sinister { grid-area: sin; align-self: start; }
  .hero h1 { font-size: clamp(30px, 4vw, 42px); }
  .hero h1::after { margin-left: 0; }
}
@media (max-width: 1180px) {
  .nav__list a { font-size: 13px; }
  .tel { display: none; }
}
@media (max-width: 1100px) {
  .pale { grid-template-columns: minmax(0,1fr) 220px minmax(0,1fr); }
  .bend__pale { left: calc(50% - 110px); width: 220px; }
  .bezant b { width: 128px; height: 128px; font-size: 40px; }
  .bezant--small b { font-size: 22px; }
  .arms-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
}
@media (max-width: 960px) {
  .chief__in { align-items: center; }
  .plaque { align-self: flex-start; }
  .menu { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 14px; min-height: 44px; background: none; color: #fff; border: 2px solid #fff; font: 700 13px/1 var(--caps); letter-spacing: .06em; cursor: pointer; }
  .menu__ico { display: grid; gap: 4px; width: 18px; }
  .menu__ico i { display: block; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .chief.open .menu__ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .chief.open .menu__ico i:nth-child(2) { opacity: 0; }
  .chief.open .menu__ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; height: auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 26px var(--pad) 34px; padding-left: max(var(--pad), 150px); background: var(--h-az), var(--az); border-bottom: 3px solid var(--sa); }
  .chief.open .nav, html:not(.js) .nav { display: flex; }
  .chief.open::after { display: none; }
  html:not(.js) .nav { position: static; padding-left: var(--pad); }
  html:not(.js) .chief__in { height: auto; flex-wrap: wrap; }
  html:not(.js) .menu { display: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { font-size: 18px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .nav__end { padding-top: 20px; gap: 20px; }
  .tel { display: inline; font-size: 21px; }
}
@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: 30px; }
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "arms" "dex" "sin"; justify-items: center; text-align: center; row-gap: 22px; }
  .hero__arms { width: min(290px, 74vw); }
  .hero__dexter { text-align: center; }
  .hero h1 { font-size: clamp(27px, 7.4vw, 36px); }
  .hero h1::after { margin: 20px auto 0; }
  .lead { margin: 0 auto; font-size: 19.5px; }
  .ctas { justify-content: center; }
  .avail { justify-content: center; }
  .pale { grid-template-columns: 1fr; grid-template-areas: "head" "intro" "stats" "dex" "sin"; }
  .pale__head { text-align: left; padding: 72px 0 20px; }
  .pale__intro { padding: 0 0 40px; }
  .pale__stats { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0 calc(-1 * var(--pad)) 48px; padding: 34px var(--pad) 30px; border-inline: 0; border-block: 3px solid var(--sa); box-shadow: inset 0 3px 0 #fff, inset 0 -3px 0 #fff; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 7px), var(--gu); }
  .bezant { flex: 1 1 0; gap: 12px; }
  .bezant b { width: 84px; height: 84px; font-size: 28px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sa); border-width: 2px; }
  .bezant--small b { font-size: 15px; }
  .bezant span { font-size: 14.5px; }
  .cases { gap: 30px; padding-bottom: 30px; }
  .cases--dexter li { grid-template-columns: 34px 1fr; text-align: left; }
  .cases--dexter .tinct { order: 0; }
  .cases--sinister { padding-bottom: 56px; }
  .bend { height: auto; padding: 0 0 48px; display: flex; flex-direction: column; }
  .bend__field { position: relative; order: 2; height: 300px; }
  .bend__pale { display: none; }
  .bend__head { position: static; order: 1; width: auto; padding: 0 var(--pad) 8px; }
  .bend__note { position: static; order: 3; width: auto; margin: 0 var(--pad); }
  .bend__codes li { width: 56px; height: 56px; font-size: 13px; border-width: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sa); }
  .bend__text { font-size: 20px; }
  .services { padding: 64px 0 80px; }
  .sec-head { margin-bottom: 44px; }
  .about__grid { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; margin: 0 auto; }
  .contact__grid { grid-template-columns: 1fr; }
  .banner::before { left: -10px; right: -10px; }
  .foot__in { grid-template-columns: 1fr; text-align: left; }
  .plaque--foot { grid-row: auto; }
  .foot__nav { justify-content: flex-start; }
  .foot__copy { grid-column: auto; }
}
@media (max-width: 560px) {
  body { font-size: 18px; }
  .chief__in { height: 64px; gap: 16px; }
  .plaque { width: 80px; height: 92px; margin-top: 8px; padding-top: 12px; }
  .plaque img { width: 54px; }
  .nav { padding-left: var(--pad); padding-top: 44px; }
  .hero { padding-top: 46px; }
  .arms-row { grid-template-columns: 1fr; gap: 52px; }
  .escut { width: 124px; height: 152px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }
  .steps__n { grid-row: span 2; margin: 0; }
  .feats { grid-template-columns: 1fr; }
  .cdata { grid-template-columns: 1fr; gap: 24px; }
  .banner__cloth { padding-bottom: 104px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 48px), 0 100%); }
  .banner h2 { padding-right: 70px; }
  .banner__arms { width: 54px; height: 65px; top: 44px; right: 22px; }
  .btn { width: 100%; }
  .ctas { width: 100%; flex-direction: column; }
}
@media print {
  .chief::after, .cut, .menu { display: none; }
}
/* Cinzel Decorative unterschneidet mit Kerning sehr eng (oo, he überlappen) – nach allen font-Kurzschreibweisen abschalten */
h1, h2, h3, .btn, .nav__list a, .menu, .cdata dt, .foot__brand, .bend__codes li, .lang { font-kerning: none; }

/* kleine Titel: Cinzel ohne Zierversalien (besser lesbar) */
h3 { font-family: var(--caps); }
h3, .btn, .nav__list a, .menu, .cdata dt, .foot__brand, .bend__codes li, .lang { font-kerning: auto; }