/* Contact follows the same Cabinet / Switzer / limestone palette. */
body.kontakt-seite{
 --tinte:#fff;--hell:#111211;--weiss:#111211;--neben:#595751;--schwach:#737069;
 --linie:#d7d2c9;--linie-stark:#aaa397;--linie-fein:#dedad3;--tafel:#fff;--fehler:#a43127;--messing:#d6ccbd;
 background:#efebe4;color:#111211;
}
.kontakt-seite #grund{display:none}
.kontakt-seite header,.kontakt-seite header.fest{background:#fff;color:#111211;border-bottom:1px solid #dedad3}
.kontakt-seite .anrede{position:relative;padding-top:clamp(70px,12vh,130px);padding-bottom:clamp(60px,10vh,100px);min-height:570px;isolation:isolate}
.kontakt-seite .anrede:after{content:"";position:absolute;inset:0 0 0 58%;z-index:-1;background:linear-gradient(90deg,#efebe4 0%,#efebe400 55%),url('media/projects/innenausbau-1200.webp') center/cover}
.kontakt-seite .anrede h1{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(46px,6vw,90px);line-height:1;max-width:12ch;letter-spacing:-.02em}
.kontakt-seite .anrede p{color:#45433f;max-width:43ch}
.kontakt-seite .anrede>.kl{color:#595751!important}
.kontakt-seite .wege{grid-template-columns:1fr 1fr;background:#fff;border-color:#d7d2c9}
.kontakt-seite .weg{border-color:#d7d2c9}.kontakt-seite .weg.betont{background:#e5e0d7}
.kontakt-seite .weg .wert{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;overflow-wrap:anywhere}
.kontakt-seite .weg .hin,.kontakt-seite .weg>.kl{color:#595751!important}
.kontakt-seite .frage,.kontakt-seite .karte .titel{font-family:'Cabinet Grotesk',sans-serif;font-weight:600}
.kontakt-seite .frage{font-size:clamp(30px,4vw,48px);letter-spacing:-.02em}
.kontakt-seite .tafel{box-shadow:0 18px 60px #29251b08}
.kontakt-seite .karte .nr{font-family:'Cabinet Grotesk',sans-serif;color:#6e675e}
.kontakt-seite .karte.gewaehlt .nr,.kontakt-seite .karte.gewaehlt .sub{color:#e0dbd2}
.kontakt-seite .voll{background:#111211;color:#fff;min-height:48px}
.kontakt-seite .voll::before{background:#3b3a36}
.kontakt-seite .voll:disabled{opacity:.5}
.kontakt-seite .feld :is(input,select,textarea){color-scheme:light}
.kontakt-seite .feld input[type=date]::-webkit-calendar-picker-indicator{filter:none}
.kontakt-seite .zustimmung:has(input:focus-visible){outline:2px solid #96784d;outline-offset:6px}
.kontakt-seite .punkt.jetzt{box-shadow:0 0 0 4px #1112111a}
.kontakt-seite .auf .wort span{filter:none}
.kontakt-seite #standort h2,.kontakt-seite #fertig h2{font-family:'Cabinet Grotesk',sans-serif;font-weight:700}
.kontakt-seite #fertig>.kl{color:#595751!important}
.kontakt-seite footer{background:#111211;color:#fff}
.kontakt-seite .back-top{background:#111211;color:#fff}
.kontakt-seite #anfrage{scroll-margin-top:80px}
.kontakt-seite .zurueck,.kontakt-seite .pzeile button{min-height:44px}
@media(max-width:760px){
 .kontakt-seite .anrede{min-height:0;padding-top:60px;padding-bottom:60px}
 .kontakt-seite .anrede:after{display:none}
 .kontakt-seite .wege{grid-template-columns:1fr}
 .kontakt-seite .tafel{padding:26px 20px}
 .kontakt-seite header{grid-template-columns:1fr auto 1fr;padding:16px 22px}
 .kontakt-seite .anrede h1{font-size:clamp(42px,11vw,68px)}
}
.kontakt-seite .anrede{max-width:none;padding-right:50%}
.kontakt-seite .anrede:after{inset:0 0 0 58%;background:linear-gradient(90deg,#efebe4 0%,#efebe400 15%),url('media/projects/innenausbau-1200.webp') center/cover}
.kontakt-seite .anrede h1{font-size:clamp(46px,5.6vw,84px)}
@media(max-width:760px){.kontakt-seite .anrede{padding-right:var(--rand)}.kontakt-seite .anrede h1{font-size:clamp(42px,11vw,68px)}}
.kontakt-seite #standort{background:#e5e0d7}
.kontakt-seite #standort .anschrift h2{font-family:'Cabinet Grotesk',sans-serif;font-weight:700}
.kontakt-seite .karte-bild .fahne{color:#fff}
.kontakt-seite #fertig p{color:#45433f}
.kontakt-seite footer a:hover{color:#fff;text-decoration:underline}
@media(max-width:640px){.kontakt-seite .leiste{position:static;margin:32px 0 0;padding:22px 0 0;background:transparent}.kontakt-seite .wege-klein a{flex-wrap:wrap;gap:6px 16px}}
.kontakt-seite .tafel,.kontakt-seite .tafel>*{min-width:0}
.kontakt-seite .marken{flex-wrap:wrap;row-gap:14px}
.kontakt-seite .pzeile>*{min-width:0;overflow-wrap:anywhere}
/* Second design pass: architectural layout and a touch-sized form. */
.kontakt-seite header{grid-template-columns:1fr auto auto;gap:34px;padding:18px var(--rand)}
.kontakt-seite .kontakt-logo .logo{height:36px;width:auto}
.kontakt-seite header nav{justify-content:flex-end}
.kontakt-seite header .unter{font-size:10px;letter-spacing:.12em}
.kontakt-seite #ankunft{min-height:0}
.kontakt-seite .anrede{padding-top:90px;padding-bottom:70px;min-height:590px}
.kontakt-seite .anrede:after{background:linear-gradient(90deg,#efebe4 0%,#efebe400 8%),url('media/projects/innenausbau-1200.webp') center/cover}
.kontakt-fakten{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;max-width:430px;border-top:1px solid #cfc8bc;padding-top:22px;margin-top:32px;font:500 11px/1.6 'Cabinet Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#655f55}
.kontakt-seite .wege{border-top:1px solid #d7d2c9}
.kontakt-seite .weg{min-height:160px;padding:28px var(--rand)}
.kontakt-seite .weg.betont{order:-1;background:#111211;color:#fff}
.kontakt-seite .weg.betont .kl,.kontakt-seite .weg.betont .hin{color:#d6cbb7!important}
.kontakt-seite .weg.betont:after{display:none}
.kontakt-seite #anfrage{padding-top:52px;padding-bottom:70px}
.kontakt-seite .tafel{border:0;border-top:3px solid #111211;padding:clamp(24px,5vw,56px);max-width:860px;box-shadow:none}
.kontakt-seite .fortschritt{margin-bottom:36px}
.kontakt-seite .marken{gap:16px}
.kontakt-seite .punkte{gap:6px}
.kontakt-seite .punkte .strich{width:10px}
.kontakt-seite .punkt{width:38px;height:38px;flex:none;border-radius:0;border:1px solid #cfc8bc;color:#655f55;font:600 11px 'Cabinet Grotesk',sans-serif;letter-spacing:.04em}
.kontakt-seite .punkt.jetzt{background:#111211;color:#fff;border-color:#111211;box-shadow:none}
.kontakt-seite .punkt.fertig{background:#efebe4;color:#111211;border-color:#d7d2c9}
.kontakt-seite .punkt:disabled{opacity:.6}
.kontakt-seite .frage{font-size:clamp(28px,3.3vw,46px);text-transform:uppercase;line-height:1.05;max-width:22ch;font-weight:700}
.kontakt-seite .karte{border-width:1px;padding:22px;min-height:110px;gap:14px}
.kontakt-seite .karte.gewaehlt{box-shadow:inset 3px 0 #b7a58a}
.kontakt-seite .feld :is(input,select,textarea){border-width:1px;background-color:#faf9f6;min-height:52px;font-size:16px}
.kontakt-seite .feld>label,.kontakt-seite .beschriftung{font-weight:700;letter-spacing:.1em}
.kontakt-seite .wahl{min-height:44px;display:inline-flex;align-items:center}
.kontakt-seite .schiene{height:2px}.kontakt-seite .balken{height:2px}
.kontakt-seite #standort{background:#e5e0d7;padding-top:70px;padding-bottom:70px}
.kontakt-seite .zustimmung{padding-top:18px;border-top:1px solid #dedad3}
@media(max-width:760px){
 .kontakt-seite{--rand:22px}
 .kontakt-seite header,.kontakt-seite header.fest{padding:14px var(--rand);gap:14px;grid-template-columns:auto 1fr auto}
 .kontakt-seite .kontakt-logo .logo{height:30px}
 .kontakt-seite header nav a{display:none}
 .kontakt-seite #abbrechen{font-size:9px;letter-spacing:.06em;line-height:1.5;max-width:90px}
 .kontakt-seite header .unter{font-size:9px;letter-spacing:.06em}
 .kontakt-seite .anrede{padding:54px var(--rand) 230px;min-height:0}
 .kontakt-seite .anrede h1{font-size:clamp(44px,12vw,74px);margin-top:18px}
 .kontakt-seite .anrede p{font-size:16px;line-height:1.65;margin-top:22px}
 .kontakt-seite .anrede:after{display:block;inset:auto var(--rand) 22px;height:180px;background:url('media/projects/innenausbau-900.webp') center 55%/cover}
 .kontakt-fakten{margin-top:24px;padding-top:18px;gap:9px 12px;font-size:10px}
 .kontakt-seite .wege{grid-template-columns:minmax(0,1fr)}
 .kontakt-seite .weg{padding:24px var(--rand);min-height:140px}
 .kontakt-seite .weg .wert{font-size:24px;max-width:calc(100% - 26px)}
 .kontakt-seite .weg .hin{font-size:13px}
 .kontakt-seite #anfrage{padding:28px 12px 48px}
 .kontakt-seite .tafel{padding:24px 18px}
 .kontakt-seite .fortschritt{margin-bottom:30px}
 .kontakt-seite .marken{align-items:flex-start;flex-direction:column;gap:12px}
 .kontakt-seite .punkte{width:100%;justify-content:space-between;gap:4px}
 .kontakt-seite .punkt{width:40px;height:40px}
 .kontakt-seite .punkte .strich{width:auto;flex:1;max-width:20px}
 .kontakt-seite .karte{padding:18px;min-height:92px}
 .kontakt-seite .karten{gap:10px;margin-top:26px}
 .kontakt-seite .karte .titel{font-size:20px;line-height:1.15}
 .kontakt-seite .karte .nr{font-size:22px}
 .kontakt-seite .leiste{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-top:28px;padding-top:20px}
 .kontakt-seite .leiste .voll{justify-content:center;width:100%;padding:16px 12px;font-size:10px;letter-spacing:.12em}
 .kontakt-seite .leiste .warum{grid-column:1/-1;font-size:12px}
 .kontakt-seite .zurueck{font-size:10px;letter-spacing:.1em}
 .kontakt-seite .pzeile{grid-template-columns:1fr auto;gap:5px 10px;padding:18px 0}
 .kontakt-seite .pzeile .was{grid-column:1/-1}
 .kontakt-seite .pzeile button{font-size:9px}
 .kontakt-seite #standort{padding:52px var(--rand)}
}
/* Keep the contact photograph and touch controls consistent with the landing page. */
.kontakt-seite .anrede:after{background-image:linear-gradient(90deg,#efebe4,transparent 14%),url('media/projects/innenausbau-1200.webp');background-position:center}
.kontakt-seite .auf .wort span{animation:none;opacity:1;transform:none}
.kontakt-seite .punkt{min-width:40px;min-height:44px}
@media(max-width:760px){
 .kontakt-seite .anrede:after{background-image:url('media/projects/innenausbau-900.webp');height:200px;inset:auto var(--rand) 22px;}
 .kontakt-seite .anrede{padding-bottom:250px}
 .kontakt-seite .punkte .strich{min-width:0}
 .kontakt-seite .karte,.kontakt-seite .voll{touch-action:manipulation}
}