Spectral (Headings), Hanken Grotesk (Fließtext), Archivo (Labels). font-display:swap — Text bleibt sofort lesbar, Webfont tauscht nach. */ @font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap; src:url("Schriftarten/spectral-v15-latin-regular.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap; src:url("Schriftarten/spectral-v15-latin-500.woff2") format("woff2")} @font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap; src:url("Schriftarten/spectral-v15-latin-600.woff2") format("woff2")} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap; src:url("Schriftarten/hanken-grotesk-v12-latin-regular.woff2") format("woff2")} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap; src:url("Schriftarten/hanken-grotesk-v12-latin-500.woff2") format("woff2")} @font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap; src:url("Schriftarten/hanken-grotesk-v12-latin-600.woff2") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap; src:url("Schriftarten/archivo-v25-latin-500.woff2") format("woff2")} @font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap; src:url("Schriftarten/archivo-v25-latin-600.woff2") format("woff2")} :root{ color-scheme:light; --papier:#F5F6F6; --papier-2:#E9EBEB; --ink:#0C2A49; /* Fließtext — themefähig, von --tinte getrennt */ --ink-soft:#3A4850; /* gedämpfter Fließtext (Absätze, Karten) */ --btn-ink:#0C2A49; /* Text auf orangen Buttons — bleibt in beiden Themes dunkel */ --tinte:#0C2A49; /* tiefes Navy — NUR Flächen (dunkle Sektionen, Bildrahmen) */ --tinte-2:#123A5E; /* zweites Dunkel für Verläufe */ --blau:#005AA8; /* Logo-Blau — Struktur, Überschriften-Akzente, Links, Eyebrows */ --blau-d:#00457E; --blau-l:#6FA8D6; /* helles Blau — Akzente auf dunklem Grund */ --orange:#F07E1E; /* Logo-Orange — ausschließlich Aktion: Buttons, Fokus, Sterne, 1 Strip-Band */ --orange-d:#E06E14; --nebel:#6E7A80; --on-dark:#E8EDF2; /* konstantes Hell — Text auf IMMER dunklen Flächen (Hero, Footer, dunkle Sektionen) */ --on-dark-mut:#9FB0BF; --line:rgba(12,42,73,.14); --line-d:rgba(232,237,242,.18); --header-bg:rgba(245,246,246,.92); --maxw:1180px; --pad:clamp(1.25rem,5vw,3rem); --logo-h:42px; } /* ===== Dunkelmodus — per data-theme="dark" auf , umschaltbar im Header ===== */ [data-theme="dark"]{ color-scheme:dark; --papier:#10151C; --papier-2:#171E27; --ink:#E7ECF1; --ink-soft:#B6C2CB; --tinte:#0A1420; --tinte-2:#0E2238; --blau:#6FA8D6; --blau-d:#5B95C4; --blau-l:#9CC8EC; --orange:#F2924A; --orange-d:#E0813A; --nebel:#8B98A1; --line:rgba(231,236,241,.13); --line-d:rgba(232,237,242,.16); --header-bg:rgba(16,21,28,.88); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--papier); color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:clamp(1rem,.95rem + .25vw,1.1rem); line-height:1.62; -webkit-font-smoothing:antialiased; transition:background .25s ease,color .25s ease; } h1,h2,h3{font-family:"Spectral",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.01em} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .eyebrow{ font-family:"Archivo",sans-serif;font-weight:600; font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--blau);display:inline-flex;align-items:center;gap:.7rem; } .eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--blau)} .eyebrow.on-dark{color:var(--blau-l)} .eyebrow.on-dark::before{background:var(--blau-l)} /* ---- buttons: Orange = einzige Aktionsfarbe, dunkler Text für Kontrast (AA) ---- */ .btn{ font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; display:inline-flex;align-items:center;gap:.6rem; padding:.85rem 1.5rem;border:1px solid var(--orange); background:var(--orange);color:var(--btn-ink);transition:background .2s,border-color .2s,color .2s; } .btn:hover{background:var(--orange-d);border-color:var(--orange-d)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn--ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)} .btn--light{background:transparent;color:var(--on-dark);border-color:var(--line-d)} .btn--light:hover{background:var(--on-dark);color:var(--btn-ink);border-color:var(--on-dark)} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px} /* ---- header: hell, damit das vollfarbige Logo trägt ---- */ header{ position:sticky;top:0;z-index:50;background:var(--header-bg); backdrop-filter:blur(8px);border-bottom:1px solid var(--line); transition:background .25s ease,border-color .25s ease; } .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem} .brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;line-height:1} .brand-logo{height:var(--logo-h);width:auto;display:block} .brand-tag{font-family:"Archivo",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--nebel);padding-left:.85rem;border-left:1px solid var(--line)} .nav-end{display:flex;align-items:center;gap:.85rem} .nav-links{display:flex;align-items:center;gap:1.7rem;list-style:none} .nav-links a{font-family:"Archivo",sans-serif;font-weight:500;font-size:.8rem; letter-spacing:.04em;text-decoration:none;color:var(--ink);transition:color .2s} .nav-links a:hover{color:var(--blau)} .nav-cta{margin-left:.4rem} .nav-links .nav-cta a{color:var(--btn-ink)} .nav-links .nav-cta a:hover{color:var(--btn-ink)} .menu-btn{display:none;min-height:44px;background:none;border:1px solid var(--line);color:var(--ink);padding:.55rem .9rem;cursor:pointer; font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase} /* ---- theme-toggle ---- */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);background:transparent; color:var(--ink);cursor:pointer;border-radius:50%;transition:border-color .2s,background .2s; } .theme-toggle:hover{border-color:var(--blau)} .theme-toggle,.svc,.steps li,.xlink,.form,.form input,.form textarea,.hoods span{ transition:background-color .25s ease,color .25s ease,border-color .25s ease; } .theme-toggle svg{width:18px;height:18px;display:block} .theme-toggle .ic-sun{display:none} .theme-toggle .ic-moon{display:block} [data-theme="dark"] .theme-toggle .ic-sun{display:block} [data-theme="dark"] .theme-toggle .ic-moon{display:none} /* ---- skip ---- */ .skip{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:.7rem 1rem;z-index:100} .skip:focus{left:.5rem;top:.5rem} /* ---- crop-mark frame (signature, jetzt Blau) ---- */ .marks{position:relative} .marks::before,.marks::after, .marks > .mark-tr,.marks > .mark-br{content:"";position:absolute;width:14px;height:14px;pointer-events:none} .marks::before{top:-1px;left:-1px;border-top:1px solid var(--blau);border-left:1px solid var(--blau)} .marks::after{top:-1px;right:-1px;border-top:1px solid var(--blau);border-right:1px solid var(--blau)} .mark-tr{bottom:-1px;left:-1px;border-bottom:1px solid var(--blau);border-left:1px solid var(--blau)} .mark-br{bottom:-1px;right:-1px;border-bottom:1px solid var(--blau);border-right:1px solid var(--blau)} /* ---- colour control strip (signature, Druck-Kontrollstreifen) ---- */ .strip{display:flex;height:6px;width:100%} .strip span{flex:1} .strip span:nth-child(1){background:var(--blau)} .strip span:nth-child(2){background:var(--orange)} .strip span:nth-child(3){background:var(--tinte)} .strip span:nth-child(4){background:var(--nebel)} .strip span:nth-child(5){background:var(--papier-2)} /* ---- image slot (art-directed duotone placeholder) ---- */ .shot{ position:relative;background:var(--tinte);overflow:hidden; display:flex;align-items:flex-end;min-height:100%; } .shot::before{ content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 15% 10%, rgba(0,90,168,.55), transparent 60%), linear-gradient(150deg, var(--tinte-2), var(--tinte) 70%); } .shot::after{ content:"";position:absolute;inset:0;opacity:.16; background-image:radial-gradient(rgba(232,237,242,.9) 1px, transparent 1.4px); background-size:9px 9px; } .shot .cap{ position:relative;z-index:2;padding:1.1rem 1.2rem; font-family:"Archivo",sans-serif;font-size:.66rem;letter-spacing:.13em; text-transform:uppercase;color:var(--on-dark-mut);line-height:1.5;max-width:30ch; } .shot .cap b{display:block;color:var(--on-dark);font-weight:600;letter-spacing:.16em;margin-bottom:.35rem} /* ---- sections ---- */ section{padding-block:clamp(3.5rem,7vw,6.5rem)} .lede{font-size:clamp(1.05rem,1rem + .5vw,1.3rem);color:var(--ink-soft);max-width:46ch} /* ---- hero ---- */ .hero-photo{position:relative;min-height:clamp(440px,62vh,620px);display:flex;align-items:flex-end; overflow:hidden;background:var(--tinte)} .hero-photo__media{position:absolute;inset:0} .hero-photo__media::before{content:"";position:absolute;inset:0; background:radial-gradient(120% 100% at 78% 18%, rgba(0,90,168,.5), transparent 58%), linear-gradient(120deg, var(--tinte) 28%, var(--tinte-2))} .hero-photo__media::after{content:"";position:absolute;inset:0;opacity:.13; background-image:radial-gradient(rgba(232,237,242,.9) 1px, transparent 1.4px);background-size:9px 9px} .hero-photo__scrim{position:absolute;inset:0; background:linear-gradient(95deg, rgba(6,22,42,.88) 0%, rgba(6,22,42,.62) 42%, rgba(6,22,42,.16) 100%)} .hero-photo__inner{position:relative;z-index:2;width:100%;padding-block:clamp(2.6rem,7vh,4.6rem)} .hero-photo h1{color:var(--on-dark);font-size:clamp(2.4rem,1.9rem + 3.6vw,4.3rem); margin:1.3rem 0 1.3rem;max-width:18ch} .hero-photo h1 .ln{display:block} .hero-photo h1 .ac{color:var(--blau-l)} .hero-photo h1 .kw{display:block;font-family:"Archivo",sans-serif;font-weight:600; font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blau-l);margin-bottom:.95rem} .hero-photo .sub{color:var(--on-dark);max-width:42ch; font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);margin-bottom:2rem} .hero-photo .trust{color:var(--on-dark-mut)} .hero-photo .trust b{color:var(--on-dark)} .hero-photo__note{position:absolute;right:clamp(1rem,4vw,2.4rem);bottom:1rem;z-index:2;max-width:32ch; text-align:right;font-family:"Archivo",sans-serif;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase; color:rgba(232,237,242,.55);line-height:1.6} .hero-photo__note b{display:block;color:rgba(232,237,242,.8);font-weight:600;margin-bottom:.25rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem} .trust{display:flex;align-items:center;gap:.8rem;font-size:.9rem;color:var(--nebel)} .trust .stars{color:var(--orange);letter-spacing:.1em} .trust b{color:var(--ink);font-weight:600} /* ---- leistungen ---- */ .grid-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);margin-top:2.8rem} .svc{background:var(--papier);padding:1.8rem 1.6rem 2rem} .svc .no{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;color:var(--blau);font-weight:600} .svc h3{font-size:1.3rem;margin:.7rem 0 .55rem} .svc p{font-size:.96rem;color:var(--ink-soft)} /* ---- split ---- */ .split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .split-shot{aspect-ratio:3/4;min-height:340px} .split h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);margin:1.1rem 0 1.2rem} .split p + p{margin-top:1rem} .creds{list-style:none;margin-top:1.6rem;border-top:1px solid var(--line)} .creds li{padding:.85rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;font-size:.95rem} .creds li span{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; color:var(--blau);font-weight:600;flex:0 0 8.5rem;padding-top:.15rem} /* ---- faq ---- */ .faq-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(1rem,3vw,3rem);align-items:end;margin-bottom:2.4rem} .faq details{border-top:1px solid var(--line)} .faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:1.25rem 0;display:flex;justify-content:space-between; align-items:center;gap:1.5rem;font-family:"Spectral",serif;font-size:1.18rem;font-weight:500} .faq summary::-webkit-details-marker{display:none} .faq summary .ic{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .25s} .faq summary .ic::before,.faq summary .ic::after{content:"";position:absolute;background:var(--blau); top:50%;left:50%;transform:translate(-50%,-50%)} .faq summary .ic::before{width:14px;height:1.5px} .faq summary .ic::after{width:1.5px;height:14px;transition:transform .25s} .faq details[open] summary .ic::after{transform:translate(-50%,-50%) scaleY(0)} .faq details p{padding:0 0 1.4rem;max-width:62ch;color:var(--ink-soft);font-size:.98rem} /* ---- agentur (dark) ---- */ .dark{background:var(--tinte);color:var(--on-dark)} .dark h2{color:var(--on-dark);font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);margin:1.1rem 0 1.2rem;max-width:18ch} .dark p{color:var(--on-dark-mut);max-width:54ch} .dark-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .dark-list{list-style:none;margin-top:.5rem} .dark-list li{padding:1rem 0;border-bottom:1px solid var(--line-d);font-size:.96rem;color:var(--on-dark); display:flex;gap:.9rem;align-items:baseline} .dark-list li::before{content:"›";color:var(--blau-l);font-family:"Spectral",serif} .dark .btn{margin-top:1.8rem} /* ---- stadtteil ---- */ .local-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .local-shot{aspect-ratio:5/4;min-height:300px} .local h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin:1.1rem 0 1.2rem} .hoods{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem} .hoods span{font-family:"Archivo",sans-serif;font-size:.74rem;letter-spacing:.06em; border:1px solid var(--line);padding:.4rem .75rem;color:var(--ink-soft)} .hoods span.is-home{border-color:var(--blau);color:var(--blau)} /* ---- kontakt ---- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start} .contact h2{font-size:clamp(1.9rem,1.5rem + 2vw,3rem);margin:1.1rem 0 1.3rem} .contact-lines{list-style:none;margin-top:1.6rem} .contact-lines li{padding:.9rem 0;border-top:1px solid var(--line);display:flex;gap:1rem;font-size:1rem} .contact-lines li:last-child{border-bottom:1px solid var(--line)} .contact-lines .k{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--nebel);flex:0 0 7rem;padding-top:.2rem} .contact-lines a{color:var(--blau);text-decoration:none} .contact-lines a:hover{text-decoration:underline} .form{background:var(--papier-2);padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line)} .form label{display:block;font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;color:var(--nebel);margin:0 0 .4rem} .form .field + .field,.form .form-row + .field,.form .field + .form-row{margin-top:1.1rem} .form input,.form textarea,.form select{width:100%;background:var(--papier);border:1px solid var(--line); padding:.8rem .9rem;font-family:inherit;font-size:.98rem;color:var(--ink);box-sizing:border-box;border-radius:0;line-height:normal} .form select{appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236B7B8A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer;min-height:3.1rem} .form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--blau);outline-offset:-1px;border-color:var(--blau)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:480px){.form-row{grid-template-columns:1fr}} section[id]{scroll-margin-top:90px} .form .btn{width:100%;justify-content:center;margin-top:1.4rem} .form-note{font-size:.78rem;color:var(--nebel);margin-top:.9rem;text-align:center} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---- footer ---- */ footer{background:var(--tinte);color:var(--on-dark-mut)} .foot-main{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-block:clamp(2.5rem,5vw,4rem)} .foot-brand{font-family:"Archivo",sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark);font-size:1rem} .foot-brand p{margin-top:1rem;font-size:.9rem;line-height:1.7;color:var(--on-dark-mut);font-family:"Hanken Grotesk",sans-serif; letter-spacing:0;text-transform:none;font-weight:400} .foot-col h4{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark);margin-bottom:1rem;font-weight:600} .foot-col a{display:block;color:var(--on-dark-mut);text-decoration:none;font-size:.92rem;padding:.3rem 0} .foot-col a:hover{color:var(--on-dark)} .foot-group{font-family:"Archivo",sans-serif;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase; color:var(--nebel);margin:.85rem 0 .1rem;display:block} .foot-group:first-of-type{margin-top:.15rem} .foot-base{border-top:1px solid var(--line-d);padding-block:1.4rem;display:flex;justify-content:space-between; flex-wrap:wrap;gap:.5rem;font-size:.8rem;color:var(--on-dark-mut)} /* ---- reveal ---- */ .reveal{opacity:1} .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}} /* ---- responsive ---- */ @media (max-width:880px){ .split,.dark-grid,.local-grid,.contact-grid,.faq-head{grid-template-columns:1fr} .grid-svc{grid-template-columns:1fr 1fr} .foot-main{grid-template-columns:1fr 1fr} .split-shot,.local-shot{order:-1} .nav-links{display:none} .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column; background:var(--papier);border-bottom:1px solid var(--line);padding:1rem var(--pad);gap:.4rem;align-items:flex-start} .nav-links.open a{padding:.6rem 0;width:100%;border-bottom:1px solid var(--line)} .nav-links.open .nav-cta{margin:.6rem 0 0} .menu-btn{display:block} } @media (max-width:520px){ :root{--logo-h:36px} .grid-svc,.foot-main{grid-template-columns:1fr} .creds li{flex-direction:column;gap:.2rem} .creds li span{flex-basis:auto} .hero-photo__note{display:none} .brand-tag{display:none} } /* ===== Unterseiten ===== */ .page-hero{background:var(--tinte);color:var(--on-dark);padding-block:clamp(2.8rem,6vw,4.6rem)} .page-hero h1{color:var(--on-dark);font-size:clamp(2rem,1.5rem + 2.4vw,3.2rem);max-width:22ch;margin:.9rem 0 1.1rem} .page-hero .sub{color:var(--on-dark-mut);max-width:54ch;font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);margin-bottom:1.8rem} .prose{max-width:64ch} .prose h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);margin:0 0 1.1rem} .prose h3{font-size:1.2rem;margin:1.9rem 0 .6rem;color:var(--ink)} .prose p{margin-bottom:1rem;color:var(--ink-soft)} .prose p:last-child{margin-bottom:0} .steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem} .steps li{background:var(--papier);padding:1.5rem 1.3rem;counter-increment:s} .steps li::before{content:counter(s,decimal-leading-zero);font-family:"Archivo",sans-serif;font-size:.78rem;letter-spacing:.12em;color:var(--blau);font-weight:600;display:block;margin-bottom:.5rem} .steps li b{font-family:"Spectral",serif;font-weight:500;font-size:1.08rem;display:block;margin-bottom:.35rem} .steps li span{font-size:.92rem;color:var(--ink-soft)} .xlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.4rem} .xlink{background:var(--papier);padding:1.6rem 1.4rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:.45rem;transition:background .2s} .xlink:hover{background:var(--papier-2)} .xlink b{font-family:"Spectral",serif;font-weight:500;font-size:1.18rem} .xlink span{font-size:.92rem;color:var(--ink-soft)} .xlink .go{font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);margin-top:.35rem} .detail-links{margin-top:1.6rem;font-size:.95rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center} .detail-links .k{font-family:"Archivo",sans-serif;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nebel)} .detail-links a{color:var(--blau);text-decoration:none} .detail-links a:hover{text-decoration:underline} .link-arrow{font-family:"Archivo",sans-serif;font-size:.84rem;color:var(--blau);text-decoration:none; display:inline-flex;align-items:center;gap:.25rem;margin-top:.8rem;font-weight:500} .link-arrow:hover{text-decoration:underline} .breadcrumb{padding:.5rem 0;border-bottom:1px solid var(--line);background:var(--papier-2)} .bc-list{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;font-size:.78rem} .bc-list li{color:var(--nebel)} .bc-list a{color:var(--nebel);text-decoration:none} .bc-list a:hover{text-decoration:underline;color:var(--blau)} .bc-list [aria-current="page"]{color:var(--ink-soft)} .cta-band{background:var(--tinte);color:var(--on-dark)} .cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem} .cta-band h2{color:var(--on-dark);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);max-width:26ch;margin:0} .cta-band .meta{font-size:.95rem;color:var(--on-dark-mut);line-height:1.9} .cta-band .meta a{color:var(--blau-l);text-decoration:none} .cta-band .meta a:hover{text-decoration:underline} .legal{max-width:70ch} .legal h2{font-size:1.25rem;margin:2rem 0 .7rem;color:var(--ink)} .legal p{margin-bottom:.8rem;color:var(--ink-soft)} .legal ul{margin:.4rem 0 1rem 1.2rem;color:var(--ink-soft)} .legal li{margin-bottom:.3rem} .legal address{font-style:normal;line-height:1.85;margin-bottom:1rem} .legal a{color:var(--blau)} @media (max-width:880px){ .steps{grid-template-columns:1fr 1fr} .xlinks{grid-template-columns:1fr} } @media (max-width:520px){ .steps{grid-template-columns:1fr} } /* ===== Echte Fotos in Hero- und Bildflächen ===== */ .hero-photo__media picture{position:absolute;inset:0;display:block} .hero-photo__media img{width:100%;height:100%;object-fit:cover;display:block} /* Platzhalter-Verlauf/Raster nur zeigen, wenn KEIN echtes Bild da ist */ .hero-photo__media:has(img)::before, .hero-photo__media:has(img)::after{content:none} .shot picture{position:absolute;inset:0;display:block} .shot img{width:100%;height:100%;object-fit:cover;display:block} .shot:has(img)::before, .shot:has(img)::after{content:none} /* Lettershop-Bildband (zentriert, gerahmt) */ .media-section{padding-bottom:0} .media-band{position:relative;width:100%;max-width:820px;margin:0 auto;aspect-ratio:4/3} .media-band .shot{position:absolute;inset:0} /* Anfahrts-/Standortkarte (breit, lesbar) */ .map-band{position:relative;width:100%;margin:2.2rem 0 0;aspect-ratio:16/9;border:1px solid var(--line)} .map-band .shot{position:absolute;inset:0;background:var(--papier)}