@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-v22-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-v22-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-v22-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-v12-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-v12-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blush:#FBF4F1; --blush-tief:#F4E7E1; --papier:#FFFCFA;
  --wein:#7C2233; --wein-tief:#5E1826; --wein-hell:#F6E9EA;
  --creme:#EBDCC6; --creme-hell:#F7EFE2;
  --ink:#241A1C; --ink-weich:#5C4A4D; --grau:#6F5A5D;
  --linie:#E7D5CE; --linie-fein:#F0E3DD;
  --h:"Space Grotesk",system-ui,sans-serif;
  --b:"Plus Jakarta Sans",system-ui,sans-serif;
  --rand:clamp(20px,5vw,60px); --max:1220px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blush);color:var(--ink);font-family:var(--b);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--wein)}
h1,h2,h3,h4{font-family:var(--h);font-weight:600;line-height:1.1;letter-spacing:-.022em;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.eng{max-width:760px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(251,244,241,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf-in{max-width:var(--max);margin:0 auto;padding:14px var(--rand);display:flex;align-items:center;justify-content:space-between;gap:20px}
.marke{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.05}
.marke b{font-family:var(--h);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase}
.marke span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-top:4px}
.hauptnav{display:flex;align-items:center;gap:4px}
.hauptnav a{font-size:14.5px;font-weight:500;color:var(--ink-weich);text-decoration:none;padding:10px 13px;border-radius:2px}
.hauptnav a:hover{color:var(--wein);background:var(--wein-hell)}
.hauptnav a[aria-current="page"]{color:var(--wein);font-weight:700}
.hauptnav a:focus-visible{outline:2px solid var(--wein);outline-offset:2px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--linie);background:var(--papier);border-radius:2px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:19px;height:1.6px;background:var(--ink);border-radius:2px}

/* ---------- Hero: Markisen-Band ---------- */
.markise{background:var(--wein);color:var(--creme-hell);border-top:3px solid var(--creme);border-bottom:3px solid var(--creme);position:relative;overflow:hidden}
.markise::before,.markise::after{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(235,220,198,.55)}
.markise::before{top:16px}
.markise::after{bottom:16px}
.markise-in{max-width:var(--max);margin:0 auto;padding:clamp(46px,6.5vw,74px) var(--rand);text-align:center;position:relative}
.markise .zeile1{font-family:var(--h);font-weight:500;font-size:clamp(15px,2.1vw,23px);letter-spacing:.09em;color:var(--creme);margin:0 0 14px}
.markise .zeile2{font-family:var(--h);font-weight:700;font-size:clamp(38px,7vw,80px);letter-spacing:.02em;line-height:1;color:var(--creme-hell);margin:0}
.markise .zeile3{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:rgba(235,220,198,.8);margin:16px 0 0}
.siegel{position:absolute;right:var(--rand);bottom:-46px;width:132px;height:auto;background:var(--papier);border-radius:50%;padding:9px;box-shadow:0 8px 26px rgba(36,26,28,.18);z-index:3}

/* ---------- Aussage unter dem Band ---------- */
.aussage{padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,64px)}
.aussage .kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--wein);font-weight:700;margin:0 0 20px}
.aussage h1{font-size:clamp(33px,5.1vw,60px);max-width:16ch}
.aussage .lead{font-size:clamp(17px,1.7vw,20.5px);color:var(--ink-weich);max-width:56ch;margin-top:22px}
.tasten{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:2px;font-family:var(--b);font-weight:600;font-size:15.5px;text-decoration:none;border:1.5px solid var(--wein);background:var(--wein);color:var(--creme-hell)}
.btn:hover{background:var(--wein-tief);border-color:var(--wein-tief)}
.btn.leer{background:transparent;color:var(--wein)}
.btn.leer:hover{background:var(--wein-hell)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Fakten-Streifen ---------- */
.fakten{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--papier)}
.fakten-in{max-width:var(--max);margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(3,1fr)}
.fakt{padding:30px 26px 30px 0;border-right:1px solid var(--linie-fein)}
.fakt:last-child{border-right:0}
.fakt:not(:first-child){padding-left:26px}
.fakt dt{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin:0 0 8px}
.fakt dd{margin:0;font-family:var(--h);font-weight:600;font-size:18px;line-height:1.3}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(66px,8vw,108px) 0}
.abschnitt.hell{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.titel{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--wein);font-weight:700;margin:0 0 18px}
h2{font-size:clamp(27px,3.5vw,42px)}
h3{font-size:clamp(19px,2vw,23px)}
.abschnitt p.gross{font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-weich);max-width:62ch;margin-top:20px}

/* ---------- Ruheband (breites Foto) ---------- */
.ruheband{position:relative;overflow:hidden;background:var(--wein-tief)}
.ruheband img{width:100%;height:clamp(190px,26vw,330px);object-fit:cover;opacity:.9}

/* Vorwahl und Anschluss sichtbar trennen: die schmale 1 der Space Grotesk
   lässt "0261 17384" sonst wie eine einzige Ziffernkette wirken */
a[href^="tel:"]{word-spacing:.3em;white-space:nowrap}

/* ---------- Räume (Innenaufnahmen) ---------- */
.raeume{background:var(--blush-tief);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:clamp(52px,6.5vw,84px) 0}
.raeume-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,38px);margin-top:34px}
.raeume figure{margin:0}
.raeume img{width:100%;aspect-ratio:940/348;object-fit:cover;display:block;border:5px solid var(--papier);box-shadow:0 2px 14px rgba(124,34,51,.09)}
.raeume figcaption{margin-top:12px;font-size:14px;color:var(--ink-weich)}

/* ---------- Zitat ---------- */
.zitat{background:var(--wein);color:var(--creme-hell);padding:clamp(60px,7.5vw,96px) 0}
.zitat .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(30px,5vw,64px);align-items:center}
.zitat blockquote{margin:0;font-family:var(--h);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.28;letter-spacing:-.015em}
.zitat cite{display:block;margin-top:22px;font-family:var(--b);font-style:normal;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:rgba(235,220,198,.78)}
.zitat img{border-radius:2px;border:5px solid var(--creme)}

/* ---------- Anwendungs-Liste ---------- */
.anwendungen{list-style:none;margin:34px 0 0;padding:0;columns:2;column-gap:clamp(26px,4vw,58px)}
.anwendungen li{break-inside:avoid;padding:13px 0 13px 26px;border-bottom:1px solid var(--linie-fein);position:relative;font-size:16.5px}
.anwendungen li::before{content:"";position:absolute;left:0;top:23px;width:11px;height:1.5px;background:var(--wein)}

/* ---------- Preistabelle ---------- */
.preise{margin-top:34px;border-top:2px solid var(--ink)}
.preis{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--linie)}
.preis h3{font-size:19px;font-weight:600}
.preis .wert{font-family:var(--h);font-weight:700;font-size:20px;white-space:nowrap;color:var(--wein)}
.preis p{grid-column:1/-1;margin:6px 0 0;font-size:15px;color:var(--ink-weich);max-width:62ch}
.hinweis{margin-top:26px;font-size:14.5px;color:var(--grau);max-width:70ch}

/* ---------- Karten / Dokumentenwand ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(20px,2.6vw,32px);margin-top:38px}
.dok{background:var(--papier);border:1px solid var(--linie);border-radius:2px;padding:16px;display:flex;flex-direction:column}
.dok img{width:100%;height:270px;object-fit:contain;object-position:center top;background:#fff;border:1px solid var(--linie-fein)}
.dok .jahr{font-family:var(--h);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--wein);margin:16px 0 6px}
.dok h3{font-size:17px;line-height:1.32}
.dok p{margin-top:8px;font-size:14.5px;color:var(--ink-weich)}

/* ---------- Zwei Spalten Text+Bild ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.duo.schmal{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.duo img{border-radius:2px;border:1px solid var(--linie)}
.duo figure{margin:0}
.duo figcaption{margin-top:12px;font-size:13.5px;color:var(--grau)}

/* ---------- Werdegang ---------- */
.werdegang{list-style:none;margin:34px 0 0;padding:0}
.werdegang li{padding:16px 0 16px 30px;border-bottom:1px solid var(--linie-fein);position:relative;font-size:16.5px}
.werdegang li::before{content:"";position:absolute;left:0;top:26px;width:15px;height:1.5px;background:var(--wein)}

/* ---------- Kontaktblock ---------- */
.kontaktliste{list-style:none;margin:30px 0 0;padding:0}
.kontaktliste li{padding:16px 0;border-bottom:1px solid var(--linie)}
.kontaktliste dt{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);margin-bottom:6px}
.kontaktliste dd{margin:0;font-family:var(--h);font-weight:600;font-size:19px}
.kontaktliste a{text-decoration:none}
.kontaktliste a:hover{text-decoration:underline}

/* ---------- CTA-Streifen ---------- */
.cta{background:var(--blush-tief);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:clamp(52px,6.5vw,80px) 0}
.cta .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.cta h2{max-width:20ch}
.cta p{margin-top:12px;color:var(--ink-weich);max-width:44ch}

/* ---------- Seitenkopf Unterseiten ---------- */
.seitenkopf{padding:clamp(56px,7vw,88px) 0 clamp(30px,4vw,46px);border-bottom:1px solid var(--linie)}
.seitenkopf h1{font-size:clamp(31px,4.6vw,52px);max-width:18ch}
.seitenkopf p{margin-top:18px;font-size:clamp(16.5px,1.6vw,19px);color:var(--ink-weich);max-width:58ch}

/* ---------- Fuss ---------- */
.fuss{background:var(--ink);color:#CFC2C4;padding:clamp(52px,6vw,74px) 0 34px;font-size:15px}
.fuss .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px}
.fuss h4{font-family:var(--h);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8E7C7F;font-weight:600;margin:0 0 14px}
.fuss a{color:#EDE2E3;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:9px}
.fuss .fussmarke b{font-family:var(--h);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#F6ECEC;display:block}
.fuss .fussmarke span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8E7C7F;display:block;margin-top:5px}
.fussende{border-top:1px solid #3A2C2E;margin-top:40px;padding-top:22px;font-size:13px;color:#8E7C7F;display:flex;flex-wrap:wrap;gap:8px 22px}

/* ---------- Rechtstext ---------- */
.recht{padding:clamp(46px,6vw,72px) 0 clamp(66px,8vw,100px)}
.recht h2{font-size:clamp(21px,2.4vw,27px);margin:44px 0 14px}
.recht h3{font-size:18px;margin:26px 0 10px}
.recht p,.recht li{font-size:15.5px;color:var(--ink-weich)}
.recht ul{padding-left:22px}

@media(max-width:920px){
  .burger{display:flex}
  .hauptnav{position:fixed;left:0;right:0;top:73px;flex-direction:column;align-items:stretch;gap:0;background:var(--papier);border-bottom:1px solid var(--linie);box-shadow:0 16px 34px rgba(36,26,28,.12);padding:8px 0 14px;display:none}
  .hauptnav.offen{display:flex}
  .hauptnav a{padding:17px var(--rand);font-size:17px;border-bottom:1px solid var(--linie-fein)}
  .hauptnav a:last-child{border-bottom:0}
  .siegel{width:96px;right:var(--rand);bottom:-36px}
  .fakten-in{grid-template-columns:1fr}
  .fakt{border-right:0;border-bottom:1px solid var(--linie-fein);padding:22px 0}
  .fakt:not(:first-child){padding-left:0}
  .fakt:last-child{border-bottom:0}
  .zitat .wrap{grid-template-columns:1fr}
  .zitat img{max-width:300px}
  .duo,.duo.schmal{grid-template-columns:1fr}
  .anwendungen{columns:1}
  .raeume-grid{grid-template-columns:1fr}
  .cta .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .aussage{padding-top:74px}
  .siegel{position:static;display:block;width:104px;margin:22px auto 0;box-shadow:none;border:1px solid var(--creme)}
  .markise-in{padding-bottom:26px}
  .preis{grid-template-columns:1fr}
  .preis .wert{margin-top:2px}
  .dok img{height:230px}
  .tasten .btn{width:100%}
}