/* ==========================================================
IN1 Design & Media · site.css
Zusammengefuehrt aus den statischen Seiten (Stand 12.10.2026).
Schrift: Nunito Sans, selbst gehostet (SIL OFL).
========================================================== */
@font-face{ font-family:"Nunito Sans"; src:url("../fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Nunito Sans"; src:url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Nunito Sans"; src:url("../fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Nunito Sans"; src:url("../fonts/nunito-sans-latin-900-normal.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
/* ---------- Design-Tokens / 8px-Raster ---------- */
:root{
--font: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--ink: #141414; /* Text / aktive Elemente */
--grey: #6b6b6b; /* aktuelle Seite, Meta, Footer – 5,3:1 auf Weiss (WCAG AA) */
--bg: #ffffff; /* Seitenhintergrund: rein weiss */
/* weitere Farbrollen – im Dunkel- und Kontrastmodus unten neu belegt */
--on-ink:#ffffff; /* Text auf Flächen in --ink (Buttons) */
--text-2:#555555; /* Nebentext */
--line: var(--line); /* feine Trennlinien */
--line-2:#dcdcdc; /* Rahmen Auswahlfelder, Chips */
--line-3:#b4b4b4; /* Rahmen Kästchen im Formular */
--fill: #f4f4f4; /* helle Fläche (Statusmeldung, Bild-Platzhalter) */
--hover: rgba(20,20,20,.035);
--sheen: rgba(255,255,255,.38);
--panel: #141414; /* dunkle Kästen (Zusammenfassung, Auf einen Blick) */
--on-panel:#ffffff;
--panel-2:#9a9a9a; /* Beschriftung im Kasten */
--panel-3:#8a8a8a;
--panel-line:#333333;
--panel-rand:transparent;
--err: #b3261e;
--ok: #2e7d5b;
--logo-bg:transparent;
--tiefe-a:1; /* Deckkraft Hintergrund-Partikel */
--fokus:var(--ink); /* Fokusrahmen, auch auf hellen Kacheln seitenweit gleich */
color-scheme:light;
--unit: 8px; /* Rastereinheit */
/* --- Register / Ausrichtung --- */
--pad-x: 56px; /* linke Kante: Logo = Menue */
--top: 56px; /* oberer Rand (Logo-Oberkante) */
--logo-w: 208px; /* Logo-Breite; viewBox-Breite = 609 */
--m-logo-w:104px; /* Logo-Breite mobil (Kopf rechtsbuendig) */
/* Logo-Grundlinien in Viewport-px (aus Geometrie abgeleitet):
Offset ab viewBox-Oberkante (57.9) * Skalierung (--logo-w/609) */
--in1-baseline: calc(var(--top) + 237.7 * var(--logo-w) / 609); /* 295.6-57.9 */
--dm-baseline: calc(var(--top) + 322.5 * var(--logo-w) / 609); /* 380.4-57.9 */
/* Schrift-Metrik Nunito Sans: Oberkante Textbox -> Grundlinie */
--h1-lh: 37.5px; /* 30px * 1.25 */
--h1-asc: 28.6px;
--sub-asc: 18.1px; /* 18px * 1.35 */
--sub-lh: 24.3px; /* 18px * 1.35 */
--baseline-fix: 0px;/* globaler Feinschliff der Header-Section */
--h1-lines: 1; /* Headline-Zeilen; Register stapelt von unten */
/* --- abgeleitet (nicht direkt anfassen) --- */
--logo-h: calc(var(--logo-w) * 324 / 609); /* Logohoehe */
--sub-mt: calc(var(--dm-baseline) - var(--in1-baseline)
- var(--sub-asc) + var(--h1-asc) - var(--h1-lh));
--main-pt: calc(var(--in1-baseline) - var(--h1-asc)
- (var(--h1-lines) - 1) * var(--h1-lh) + var(--baseline-fix));
--intro-mb: 80px; /* Hero -> Karten */
--intro-h: calc(var(--h1-lines) * var(--h1-lh) + var(--sub-mt) + var(--sub-lh));
/* gemeinsame Oberkante: Karten rechts = erste Menuezeile links */
--content-top: calc(var(--main-pt) + var(--intro-h) + var(--intro-mb));
--nav-captop: 4px; /* Oberkante Zeilenbox -> Oberkante Versalie (19px) */
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; }
body{
font-family:var(--font);
color:var(--ink);
background:var(--bg);
font-weight:600;
line-height:1.4;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
/* ---------- Grundgerüst ---------- */
.page{
display:grid;
grid-template-columns:320px 1fr; /* feste Sidebar, flexibler Inhalt */
min-height:100vh;
}
/* Breiter als 16:9 -> Inhalt auf 16:9-Breite begrenzen, zentriert, weisse Raender */
@media (min-width:901px){
.page{ max-width:max(calc(100vh * 16 / 9), 1440px); margin-inline:auto; }
/* Logo + Menue bleiben beim Scrollen stehen (Social bleibt unten) */
.sidebar{ position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }
}
/* Genug Platz -> H1 einzeilig; Register auf 1 Zeile umstellen */
html.h1-2{ --h1-lines:2; }
@media (min-width:1200px){
:root, html.h1-2{ --h1-lines:1; }
.intro h1{ white-space:nowrap; }
.intro h1 .h1-br{ display:none; }
}
/* ---------- Sidebar ---------- */
.sidebar{
display:flex;
flex-direction:column;
padding:var(--top) 40px 40px var(--pad-x);
}
/* Menue nach unten: Oberkante erste Zeile = --content-top (= Karten rechts) */
.brand{ position:relative; margin-bottom:calc(var(--content-top) - var(--top) - var(--logo-h) - var(--nav-captop)); }
.logo{ display:block; width:var(--logo-w); height:auto; }
/* Navigation — zweistufig */
.nav{ list-style:none; }
.nav > li{ margin-bottom:20px; } /* Abstand zwischen Ebene-1-Bloecken */
.nav-top{
font-weight:900;
font-size:19px;
line-height:1.2;
text-transform:uppercase;
letter-spacing:.015em;
}
.nav-top.is-current{ color:var(--grey); } /* aktuelle Seite: Pakete */
/* gleicher Abstand: Ebene1 -> Ebene2 == Ebene2 -> Ebene2 (beide 6px) */
.nav-sub{
list-style:none;
margin-top:6px;
}
.nav-sub li{ margin-bottom:6px; }
.nav-sub li:last-child{ margin-bottom:0; }
.nav-sub a{
font-weight:900;
font-size:17px;
line-height:1.2;
}
.nav a:hover, .nav-top:hover{ opacity:.6; }
/* Social unten links */
.social{
margin-top:auto;
padding-top:40px;
display:flex;
gap:8px;
}
.social a{
width:34px; height:34px;
background:var(--ink);
display:flex; align-items:center; justify-content:center;
}
.social svg{ width:18px; height:18px; fill:var(--on-ink); }
.social a:hover{ opacity:.75; }
/* ---------- Hauptbereich ---------- */
main{
display:flex;
flex-direction:column;
/* padding-top: H1-Grundlinie liegt auf der IN1-Grundlinie */
padding:var(--main-pt) 56px 40px 64px;
}
.intro{ margin-bottom:var(--intro-mb); max-width:760px; }
.intro h1{
font-weight:800;
font-size:30px;
line-height:1.25;
letter-spacing:-.005em;
margin:0;
}
.intro p{
font-weight:700;
font-size:18px;
line-height:1.35;
/* Grundlinie der Subheadline auf DESIGN & MEDIA-Grundlinie */
margin-top:var(--sub-mt);
}
/* Paket-Karten */
.cards{
display:flex;
flex-wrap:wrap;
gap:16px;
}
.card{
position:relative;
overflow:hidden;
isolation:isolate;
width:280px; /* feste Breite -> Kacheln bleiben zusammen, linksbuendig */
flex:0 0 auto;
aspect-ratio:3 / 4;
max-height:max(50vh, 400px); /* Desktop: halbe Viewport-Hoehe, aber nie so knapp, dass Text abgeschnitten wird */
padding:40px 30px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
/* SVG-Flächen (Kurven) liegen ganz hinten */
.card-art{
position:absolute; inset:0; z-index:0;
width:100%; height:100%; display:block;
}
/* Grundfläche + drei Farbflächen als eigene Ebenen (nur transform -> Grafikkarte) */
.card-art > svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Farbflächen-Ebenen sind 1,5x so groß wie die Kachel (viewBox entsprechend erweitert, Darstellung identisch),
damit beim Verschieben nie eine Kante sichtbar wird. Die Kachel schneidet den Rest ab. */
.card-art > svg.blob{ inset:auto; left:-25%; top:-25%; width:150%; height:150%; will-change:transform; }
/* feines Grain über den Flächen, unter dem Text */
.card::after{
content:""; position:absolute; inset:0; z-index:1;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:160px 160px;
opacity:.16; mix-blend-mode:soft-light; pointer-events:none;
}
/* Text immer über Flächen und Grain */
.card h2, .card p, .card .price-wrap{ position:relative; z-index:2; }
.card h2{
font-weight:800;
font-size:23px;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:24px;
}
.card p{
font-weight:600;
font-size:16px;
line-height:1.45;
max-width:30ch;
}
/* Preisblock unten -> Preis liegt bei allen Kacheln auf gleicher Hoehe */
.card .price-wrap{ margin-top:auto; }
.card .more{ position:relative; z-index:2; margin-top:auto; color:var(--ink); font-weight:800; font-size:14px; letter-spacing:.02em; }
.card .price{
color:var(--grey);
font-weight:600;
font-size:16px;
}
.card .vat{
margin-top:12px;
color:var(--grey);
font-weight:600;
font-size:16px;
}
/* Farbflächen je Paket werden per Inline-SVG (.card-art) gezeichnet. */
/* ---------- Footer unten rechts ---------- */
.site-footer{
margin-top:auto;
padding-top:48px;
text-align:right;
color:var(--grey);
font-weight:600;
font-size:15px;
line-height:1.6;
}
.footer-social{
display:flex;
justify-content:flex-end;
gap:12px;
margin-bottom:12px;
}
.footer-social a{ color:var(--grey); }
.footer-social svg{ width:16px; height:16px; fill:currentColor; }
.footer-social a:hover{ color:var(--ink); }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 20px; }
.footer-links a, .footer-links .footer-ruhe{ margin:0; }
.footer-links a:hover{ color:var(--ink); }
/* ---------- Responsiv ---------- */
@media (max-width:900px){
.page{ grid-template-columns:1fr; }
.sidebar{ padding:20px 24px; }
.brand{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:0; }
.sidebar .m-toggle{ display:flex; align-items:center; cursor:pointer; }
.logo{ width:var(--m-logo-w); }
.sidebar nav, .sidebar .social{ display:none; }
.sidebar.nav-open nav{ display:block; margin-top:24px; }
.sidebar.nav-open .social{ display:flex; margin-top:24px; padding-top:0; }
/* Trennlinie ist Teil des Menues: nur im geoeffneten Zustand sichtbar */
.sidebar.nav-open::after{
content:""; display:block;
height:calc(var(--m-logo-w) * 13.1 / 609);
margin-top:20px;
background:var(--ink);
}
main{ padding:8px 24px 40px; }
.cards{ flex-direction:column; }
.card{ width:auto; aspect-ratio:auto; max-height:none; padding:40px 32px; }
.card p{ max-width:none; }
.site-footer{ text-align:left; }
.footer-social{ justify-content:flex-start; }
.footer-links{ justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; }
}
/* ===== Logo-Animation: nur im Preloader ===== */
/* Burger: nur mobil sichtbar, drei horizontale "I", Gesamthoehe = Hoehe des vertikalen I */
.m-toggle{ display:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; }
.burger{ display:block; height:calc(var(--m-logo-w) * 237.4 / 609); width:auto; }
/* Flaggen wachsen diagonal aus ihrer Ansatzkante (keine Deckkraft) */
.lgo .flag{
transform:scale(0); transform-box:fill-box;
transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.lgo .fa{ transform-origin:0% 0%; }
.lgo .fc{ transform-origin:100% 100%; }
.lgo .fb{ transform-origin:100% 0%; }
.lgo.is-formed .flag{ transform:scale(1); }
/* Schriftzug waechst auf (keine Deckkraft) */
.lgo .lgo-word{
transform:scale(0); transform-box:fill-box; transform-origin:50% 0%;
transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.lgo.is-worded .lgo-word{ transform:scale(1); }
/* Sidebar-Logo immer vollstaendig (Desktop + Mobil); Preloader animiert separat */
.sidebar .lgo .flag{ transform:scale(1); }
.sidebar .lgo .lgo-word{ transform:scale(1); }
/* ===== Preloader ===== */
.preloader{
position:fixed; inset:0; z-index:1000; background:var(--bg);
display:flex; align-items:center; justify-content:center;
opacity:1; transition:opacity .5s ease;
}
.preloader.hide{ opacity:0; pointer-events:none; }
html.nopreload .preloader{ display:none !important; }
/* Preloader-Logo aus Einzelebenen (snippets/preloader.php).
Bewegt wird ausschließlich mit transform -> läuft auf der Grafikkarte. */
.pl{ position:relative; width:min(280px,60vw); aspect-ratio:609 / 245; color:var(--ink); }
.pl-bar, .pl-flag{ position:absolute; display:block; }
.pl-bar{ top:0.1224%; width:9.3103%; height:96.898%;
transform:translateX(var(--s)); transition:transform .55s cubic-bezier(.65,0,.35,1); will-change:transform; }
.pl-bar i{ position:absolute; inset:0; background:currentColor; will-change:transform; }
.preloader.spread .pl-bar{ transform:translateX(0); }
.pl-flag{ fill:currentColor; overflow:visible; transform:scale(0); transition:transform .5s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.pl-flag.fa{ transform-origin:0% 0%; }
.pl-flag.fc{ transform-origin:100% 100%; }
.pl-flag.fb{ transform-origin:100% 0%; }
.pl.is-formed .pl-flag{ transform:scale(1); }
/* sehr subtiles Pulsieren (keine Deckkraft), zeitversetzt -> Welle von links nach rechts */
@keyframes barPulse{
0%,100%{ transform:scaleY(1); }
50% { transform:scaleY(.9); }
}
.preloader:not(.spread) .pl-bar i{ animation:barPulse .95s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
.pl-bar i{ animation:none !important; }
}
/* ---------- Seite "Die Idee" ---------- */
/* Leitsatz direkt unter dem Hero (Oberkante = erste Menuezeile, via Register) */
.idea{ max-width:640px; }
.idea .lead{
font-weight:600;
font-size:17px;
line-height:1.6;
max-width:66ch;
}
/* Prinzip-Streifen: gleiche Blob-Optik, aber flach und breit statt Kachel */
.values{
margin-top:56px;
flex-wrap:nowrap;
gap:12px;
align-items:stretch;
}
.values .card{
width:auto;
flex:1 1 0;
aspect-ratio:auto;
max-height:none;
min-height:200px;
padding:32px 28px;
text-align:left;
align-items:flex-start;
justify-content:center;
cursor:default;
}
.values .card h2{ margin-bottom:12px; }
.values .card p{ max-width:34ch; }
/* "So arbeiten wir" — ruhiger Textblock */
.how{ margin-top:64px; max-width:640px; }
.how-h{
font-weight:800;
font-size:23px;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:24px;
}
.how p{
font-weight:600;
font-size:17px;
line-height:1.6;
max-width:66ch;
}
.how p + p{ margin-top:20px; }
/* ---------- Paket-Unterseiten ---------- */
.nav-sub .is-current{ font-weight:900; font-size:17px; line-height:1.2; color:var(--grey); }
.pkg{ max-width:62ch; }
.pkg .lead{ font-weight:600; font-size:18px; line-height:1.5; }
.pkg-price{ margin:28px 0 4px; }
.pkg-price-num{ font-weight:900; font-size:34px; letter-spacing:-.01em; }
.pkg-price-vat{ margin-left:10px; color:var(--grey); font-size:15px; font-weight:700; }
.pkg p{ font-weight:600; font-size:16px; line-height:1.6; }
.pkg p + p{ margin-top:12px; }
.pkg .body{ margin-top:24px; }
.btn{
display:inline-block; margin-top:28px;
background:var(--ink); color:var(--on-ink);
font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
padding:15px 28px; text-decoration:none;
transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn:hover, .btn:focus-visible{ transform:translateY(-3px); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pkg-more{ margin-top:36px; color:var(--grey); font-size:15px; font-weight:700; }
.pkg-more a{ color:var(--ink); text-decoration:underline; }
.pkg-more a:hover{ opacity:.6; }
/* Klickbare Kacheln auf Unterseiten: Hover (nur Transform, kein Schatten) */
a.card{ cursor:pointer; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
a.card:hover, a.card:focus-visible{ transform:translateY(-6px); }
a.card:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px; }
a.card::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(115deg, transparent 20%, var(--sheen) 50%, transparent 80%);
transform:translateX(-130%);
transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
}
a.card:hover::before, a.card:focus-visible::before{ transform:translateX(130%); }
.weiter{ margin-top:48px; }
@media (prefers-reduced-motion:reduce){
a.card:hover, a.card:focus-visible{ transform:none; }
a.card::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .btn:hover, .btn:focus-visible{ transform:none; } }
@media (max-width:900px){
.idea, .how{ max-width:none; }
.idea .lead{ max-width:none; }
.values{ margin-top:32px; gap:12px; }
.values .card{ min-height:auto; padding:32px; }
.values .card p{ max-width:none; }
.how{ margin-top:40px; }
}
/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal{ max-width:70ch; }
.legal h2{
font-weight:800; font-size:19px; letter-spacing:-.005em;
margin:36px 0 10px;
}
.legal h2:first-child{ margin-top:0; }
.legal p{ font-weight:600; font-size:16px; line-height:1.6; }
.legal p + p{ margin-top:12px; }
.legal a{ text-decoration:underline; }
.legal a:hover{ opacity:.6; }
.legal .muted{ margin-top:32px; color:var(--grey); font-size:14px; }
/* ---------- Kontakt / Konfigurator ---------- */
.konfig-wrap{ display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; max-width:940px; }
.kf fieldset{ border:0; padding:0; margin:0 0 26px; }
.kf legend{ font-weight:800; font-size:16px; margin-bottom:12px; padding:0; }
.kf .opts{ display:flex; flex-wrap:wrap; gap:10px; }
.kf .opt{
position:relative; display:inline-flex; align-items:center; gap:10px;
padding:10px 14px; border:1.5px solid var(--line-2);
font-weight:600; font-size:15px; line-height:1; cursor:pointer; user-select:none;
transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.kf .opt:hover{ border-color:var(--ink); }
.kf .opt input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.kf .opt .ind{ flex:none; width:16px; height:16px; border:2px solid var(--line-3); position:relative;
transition:border-color .15s ease, background-color .15s ease; }
.kf .opt-radio .ind{ border-radius:50%; }
.kf .opt-check .ind{ border-radius:3px; }
.kf .opt:hover .ind{ border-color:var(--ink); }
/* Zustand ausgewaehlt – Fallback ueber Indikator (funktioniert ueberall) */
.kf .opt input:checked + .ind{ border-color:var(--ink); background:var(--ink); }
.kf .opt-radio input:checked + .ind::after{ content:""; position:absolute; inset:3px; background:var(--on-ink); border-radius:50%; }
.kf .opt-check input:checked + .ind::after{ content:""; position:absolute; left:3px; top:0; width:5px; height:9px;
border:2px solid var(--on-ink); border-top:0; border-left:0; transform:rotate(45deg); }
/* Enhancement: ganze Chip fuellt (moderne Browser) */
.kf .opt:has(input:checked){ border-color:var(--ink); background:var(--ink); color:var(--on-ink); }
.kf .opt:has(input:checked) .ind{ border-color:var(--on-ink); background:transparent; }
.kf .opt-radio:has(input:checked) .ind::after{ background:var(--on-ink); }
.kf .opt-check:has(input:checked) .ind::after{ border-color:var(--on-ink); }
.kf .opt:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
.kf .opt:has(input:disabled){ cursor:default; }
.kf .opt:has(input:disabled) .txt::after{ content:" · inkl."; color:var(--grey); font-weight:700; }
.kf .field{ margin-bottom:18px; }
.kf .field label{ display:block; font-weight:700; font-size:14px; margin-bottom:6px; }
.kf input[type=text], .kf input[type=email], .kf input[type=tel], .kf select, .kf textarea{
width:100%; font:inherit; font-size:15px; font-weight:600; color:var(--ink);
background:var(--bg); border:1px solid var(--ink); padding:10px 12px;
}
.kf textarea{ min-height:100px; resize:vertical; }
.kf 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='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
padding-right:38px;
}
.kf input:focus-visible, .kf select:focus-visible, .kf textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.kf .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kf .btn{ display:inline-block; margin-top:8px; background:var(--ink); color:var(--on-ink);
font-weight:900; font-size:14px; text-transform:uppercase; letter-spacing:.06em;
padding:15px 28px; border:0; cursor:pointer; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.kf .btn:hover, .kf .btn:focus-visible{ transform:translateY(-3px); }
.kf .btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.kf .hint{ margin-top:12px; color:var(--grey); font-size:13px; max-width:52ch; }
.kf .hint2{ margin-top:6px; color:var(--grey); font-size:13px; }
.kf input[type=number]{ width:120px; font:inherit; font-size:15px; font-weight:600; color:var(--ink);
background:var(--bg); border:1px solid var(--ink); padding:10px 12px; }
.summary .preis{ margin-top:18px; padding-top:16px; border-top:1px solid var(--panel-line); margin-bottom:0; }
.summary .preis .sval{ font-size:19px; }
.summary .sdisc{ font-size:11px; color:var(--panel-3); margin-top:4px; }
.summary{ position:sticky; top:24px; background:var(--panel); color:var(--on-panel); padding:24px; outline:1px solid var(--panel-rand); }
.summary h2{ font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 16px; color:var(--on-panel); }
.summary .srow{ margin-bottom:14px; }
.summary .scap{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--panel-2); }
.summary .sval{ font-weight:700; font-size:15px; margin-top:2px; }
.summary .sval.empty{ color:var(--panel-3); font-weight:600; }
@media (max-width:900px){
.konfig-wrap{ grid-template-columns:1fr; gap:28px; }
.summary{ position:relative; }
.kf .row2{ grid-template-columns:1fr; }
.btn{ transition:none; }
}
@media (prefers-reduced-motion:reduce){ .kf .btn:hover, .kf .btn:focus-visible{ transform:none; } }
/* ---------- Startseite ---------- */
.home-ph{ margin-top:64px; }
.home-pakete{ margin-top:24px; }
/* ---------- Ergaenzungen (Okt. 2026) ---------- */
.brand > a{ display:block; }
/* Paket-Detail: feste Struktur */
.pkg-sec{ margin-top:40px; }
.pkg-sec h2{ font-weight:800; font-size:19px; letter-spacing:-.005em; margin-bottom:12px; }
.pkg-sec p{ font-weight:600; font-size:16px; line-height:1.6; }
.pkg-list, .pkg-steps{ list-style:none; }
.pkg-list li, .pkg-steps li{ position:relative; padding-left:28px; margin-bottom:12px; font-size:16px; line-height:1.5; }
.pkg-list li strong, .pkg-steps li strong{ display:block; font-weight:800; }
.pkg-list li span, .pkg-steps li span{ display:block; font-weight:600; color:var(--text-2); }
/* Aufzaehlung: schwarzes Quadrat = Balken aus dem Logo */
.pkg-list li::before{ content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px; background:var(--ink); }
.pkg-list--minus li::before{ height:3px; top:.75em; background:var(--grey); }
.pkg-steps{ counter-reset:step; }
.pkg-steps li{ counter-increment:step; }
.pkg-steps li::before{ content:counter(step); position:absolute; left:0; top:0; font-weight:900; font-size:16px; }
.pkg-note{ margin-top:32px; color:var(--grey); font-size:15px; font-weight:700; }
/* Landingpage */
.landing-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.pkg-list li span a{ color:var(--ink); text-decoration:underline; }
.pkg-list li span a:hover{ opacity:.6; }
/* Kontaktformular: Versand an den Server */
.kf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.kf-err{ margin-top:6px; font-size:13px; font-weight:700; color:var(--err); }
.kf-err:empty{ display:none; }
.kf .is-invalid{ border-color:var(--err) !important; outline:1px solid var(--err); }
.kf .hint a{ text-decoration:underline; }
.kf-status{ margin-bottom:26px; padding:16px 18px; font-weight:700; font-size:16px; line-height:1.5; border-left:6px solid var(--ink); background:var(--fill); }
.kf-status.is-ok{ border-color:var(--ok); }
.kf-status.is-err{ border-color:var(--err); }
.kf .btn[disabled]{ opacity:.5; cursor:wait; transform:none; }
#leistung-hint{ margin-top:12px; font-size:14px; color:var(--ink); font-weight:700; }
/* ---------- FAQ ---------- */
.faq{ margin-top:56px; max-width:66ch; }
.faq-item{ padding:18px 0; border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item h3{ font-weight:800; font-size:17px; line-height:1.35; margin-bottom:6px; }
.faq-item p{ font-weight:600; font-size:16px; line-height:1.6; }
.faq-item a{ text-decoration:underline; }
.pkg-stand{ margin-top:24px; font-size:13px; }
/* ---------- Wissen ---------- */
.wissen-list{ max-width:70ch; }
.wissen-item{ padding:22px 0; border-top:1px solid var(--line); }
.wissen-item:last-child{ border-bottom:1px solid var(--line); }
.wissen-item h2, .wissen-item h3{ font-weight:800; font-size:21px; line-height:1.3; margin-bottom:8px; }
.wissen-list--home .wissen-item h3{ font-size:18px; }
.wissen-item h2 a:hover, .wissen-item h3 a:hover{ opacity:.6; }
.wissen-item p{ font-weight:600; font-size:16px; line-height:1.55; }
.wissen-meta{ color:var(--grey); font-weight:700; font-size:14px; margin-bottom:6px; }
.wissen-more{ display:inline-block; margin-top:10px; font-weight:800; font-size:14px; text-decoration:underline; }
.wissen-list--home{ margin-top:24px; }
/* ---------- Artikel ---------- */
.artikel{ max-width:68ch; }
.kurz{ margin:20px 0 36px; padding:22px 24px; background:var(--panel); color:var(--on-panel); outline:1px solid var(--panel-rand); }
.kurz-label{ font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--panel-2); margin-bottom:8px; }
.kurz p{ font-weight:700; font-size:17px; line-height:1.55; }
.artikel-text h2{ font-weight:800; font-size:22px; line-height:1.3; margin:40px 0 12px; }
.artikel-text h3{ font-weight:800; font-size:18px; margin:28px 0 8px; }
.artikel-text p, .artikel-text li{ font-weight:600; font-size:17px; line-height:1.65; }
.artikel-text p + p{ margin-top:14px; }
.artikel-text ul, .artikel-text ol{ margin:12px 0 12px 22px; }
.artikel-text li{ margin-bottom:6px; }
.artikel-text a{ text-decoration:underline; }
.artikel-text table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; }
.artikel-text th, .artikel-text td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); line-height:1.45; }
.artikel-text th{ font-weight:800; border-bottom:2px solid var(--ink); }
.artikel-text td{ font-weight:600; }
.quellen{ margin-top:40px; }
.quellen h2{ font-weight:800; font-size:16px; margin-bottom:8px; }
.quellen li{ font-size:14px; font-weight:600; margin:0 0 4px 18px; }
.quellen a{ text-decoration:underline; color:var(--text-2); }
main{ min-width:0; }
@media (max-width:900px){
.page{ grid-template-columns:minmax(0,1fr); }
.artikel-text table{ min-width:560px; }
}
/* ---------- Referenzen ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px 16px; }
.pcard{ display:block; color:inherit; }
.pcard-bild{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--fill); }
.pcard-bild img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard-bild img, .pcard:focus-visible .pcard-bild img{ transform:scale(1.04); }
.pcard:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pcard-text{ display:block; padding-top:12px; }
.pcard-titel{ display:block; font-weight:800; font-size:17px; line-height:1.3; }
.pcard-meta{ display:block; margin-top:4px; color:var(--grey); font-weight:700; font-size:14px; }
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.chip{ display:inline-block; padding:8px 14px; border:1.5px solid var(--line-2); font-weight:700; font-size:14px; line-height:1; }
.chip:hover{ border-color:var(--ink); }
.chip.is-aktiv{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.kunde-kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-bottom:36px; max-width:70ch; }
.kunde-logo{ max-height:64px; max-width:200px; width:auto; }
.kunde-kopf p{ font-weight:600; font-size:16px; line-height:1.55; flex:1 1 280px; }
.kunde-links{ flex-basis:100% !important; font-size:14px !important; }
.kunde-links a{ text-decoration:underline; }
.projekt{ max-width:900px; }
.projekt-hauptbild{ margin:0 0 24px; }
.projekt-hauptbild img{ width:100%; height:auto; display:block; }
.projekt-fakten{ display:flex; flex-wrap:wrap; gap:12px 40px; margin-bottom:24px; }
.projekt-fakten dt{ font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); }
.projekt-fakten dd{ font-weight:700; font-size:16px; margin-top:2px; }
.projekt-fakten a{ text-decoration:underline; }
.projekt-kurz{ max-width:62ch; margin-bottom:16px; }
.projekt .artikel-text{ max-width:68ch; }
.galerie{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin:32px 0; }
.galerie figure{ margin:0; }
.galerie img{ width:100%; height:auto; display:block; }
/* Startseite: Kundenlogos */
.logos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; margin-top:24px; }
.logo-item{ display:flex; align-items:center; justify-content:center; aspect-ratio:3/2; padding:20px; border:1px solid var(--line); background:var(--logo-bg); }
.logo-item img{ max-width:100%; max-height:56px; width:auto; height:auto; filter:grayscale(1); opacity:.7; transition:filter .3s, opacity .3s; }
.logo-item:hover img, .logo-item:focus-visible img{ filter:none; opacity:1; }
.logo-item:hover{ border-color:var(--ink); }
/* Startseite: Projekt-Slider */
.slider-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.slider-nav{ display:flex; gap:8px; }
.slider-btn{ width:40px; height:40px; border:1.5px solid var(--ink); background:var(--bg); color:var(--ink); font:inherit; font-weight:900; font-size:18px; cursor:pointer; }
.slider-btn:hover:not([disabled]){ background:var(--ink); color:var(--on-ink); }
.slider-btn[disabled]{ opacity:.25; cursor:default; }
.slider{ display:grid; grid-auto-flow:column; grid-auto-columns:min(420px, 85%); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:24px; padding-bottom:12px; scrollbar-width:thin; }
.slide{ scroll-snap-align:start; }
.slider:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .pcard-bild img{ transition:none; } }
/* Startseite: Wissen als Akkordeon – Marker = Quadrat wie die Aufzählungen, offen = Raute */
.akkordeon{ max-width:66ch; margin-top:24px; }
.akk-item{ border-top:1px solid var(--line); }
.akk-item:last-child{ border-bottom:1px solid var(--line); }
.akk-item summary{ list-style:none; cursor:pointer; position:relative; padding:16px 0 16px 28px; font-weight:800; font-size:17px; line-height:1.4; }
.akk-item summary::-webkit-details-marker{ display:none; }
.akk-item summary::marker{ content:""; }
.akk-item summary::before{ content:""; position:absolute; left:2px; top:calc(16px + .7em - 4.5px); width:9px; height:9px; background:var(--ink); transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.akk-item[open] summary::before{ transform:rotate(45deg); }
.akk-item summary:hover{ opacity:.7; }
.akk-item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.akk-inhalt{ padding:0 0 20px 28px; }
.akk-inhalt p{ font-weight:600; font-size:17px; line-height:1.6; }
.akk-inhalt .wissen-more{ font-size:15px; }
@media (prefers-reduced-motion:reduce){ .akk-item summary::before{ transition:none; } }
/* ---------- Responsive Kachelraster (Container-Queries auf main) ---------- */
main{ container-type:inline-size; container-name:inhalt; }
/* Prinzipien schnell/einfach/günstig: nebeneinander nur, wenn genug Platz – sonst als breite Streifen */
@container inhalt (max-width: 860px){
.values{ flex-direction:column; }
.values .card{ flex:none; width:100%; min-height:0; padding:28px; }
.values .card p{ max-width:60ch; }
}
/* Vier Paket-Kacheln: 4 in einer Reihe erst ab 1100 px Inhaltsbreite, sonst 2 × 2 */
@media (min-width:901px){
.cards:has(> .card:nth-child(4)):not(.values){ display:grid; grid-template-columns:repeat(2, minmax(0, 320px)); gap:16px; }
.cards:has(> .card:nth-child(4)):not(.values) .card{ width:auto; min-width:0; aspect-ratio:auto; max-height:none; min-height:400px; }
}
@container inhalt (min-width: 1100px){
.cards:has(> .card:nth-child(4)):not(.values){ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cards:has(> .card:nth-child(4)):not(.values) .card{ padding:36px 22px; }
}
/* ---------- Hintergrund-Tiefe (Partikel) ---------- */
#tiefe{ position:fixed; top:0; left:0; width:100%; height:100vh; height:100lvh; z-index:0; pointer-events:none; display:block; }
.page{ position:relative; z-index:1; }
/* ---------- Barrierefreiheit ---------- */
/* Preise auf farbigen Kacheln: dunkleres Grau, damit auch auf Rosé/Blaugrau mind. 4,5:1 erreicht wird */
.card .price, .card .vat{ color:var(--grey); }
/* Sichtbarer Tastaturfokus überall */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* Sprunglink zum Inhalt (nur bei Tastaturfokus sichtbar) */
.skip{ position:absolute; left:16px; top:-60px; z-index:2000; background:var(--ink); color:var(--on-ink); padding:12px 18px; font-weight:800; font-size:15px; }
.skip:focus{ top:16px; }
/* Tabellen: scrollbarer Bereich, per Tastatur erreichbar */
.tabelle{ max-width:100%; overflow-x:auto; margin:20px 0; }
.tabelle table{ margin:0; }
/* Bewegung pausieren (Schalter im Footer) */
html.ruhig *, html.ruhig *::before, html.ruhig *::after{ animation:none !important; transition:none !important; }
.footer-ruhe{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:none; }
.footer-ruhe:hover{ color:var(--ink); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
main:focus{ outline:none; }
/* ---------- Überschriften im Fließtext: so groß wie die H1, 20 % mehr Luft davor ---------- */
.pkg-sec{ margin-top:48px; }
.pkg-sec h2, .artikel-text h2{ font-weight:800; font-size:30px; line-height:1.25; letter-spacing:-.005em; margin-bottom:14px; }
.artikel-text h2{ margin-top:48px; }
@media (max-width:900px){ .pkg-sec h2, .artikel-text h2{ font-size:26px; } }
/* ---------- Paketvergleich (typografisch, ohne Rahmen) ---------- */
.sym{ display:inline-block; vertical-align:0; margin-right:8px; flex:none; }
/* Haken aus der Logo-Geometrie; Farbe kommt über background, Form über die Maske */
.sym-ja{ width:11px; height:11px; background:var(--ink); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199.66 199.98'%3E%3Cpolygon points='39.77 199.98 0 160.2 .95 61.85 57.64 62.4 57.25 102.32 159.57 0 199.66 40.09 39.77 199.98'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 199.66 199.98'%3E%3Cpolygon points='39.77 199.98 0 160.2 .95 61.85 57.64 62.4 57.25 102.32 159.57 0 199.66 40.09 39.77 199.98'/%3E%3C/svg%3E") center/contain no-repeat; }
.sym-nein{ width:10px; height:3px; background:var(--grey); vertical-align:.3em; }
.sym-optional{ width:0; height:0; border-left:5.5px solid transparent; border-right:5.5px solid transparent; border-bottom:10px solid var(--ink); }
.vergleich{ margin-top:16px; }
.vergleich-scroll{ margin-top:24px; }
/* Registerhaltig: eine Schriftgröße, eine Zeilenhöhe, alle Zellen auf der Grundlinie */
.vergleich-tabelle{ width:100%; border-collapse:collapse; font-size:16px; line-height:24px; min-width:720px; table-layout:fixed; }
.vergleich-tabelle th, .vergleich-tabelle td{ text-align:left; vertical-align:baseline; padding:8px 16px 8px 0; font-weight:600; }
.vergleich-tabelle thead th{ width:19%; padding:0 16px 0 0; }
.vergleich-tabelle thead th:first-child{ width:24%; }
.vergleich-tabelle thead a{ font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.vergleich-tabelle thead a:hover{ opacity:.6; }
.vergleich-tabelle .vg-basis td{ color:var(--grey); padding:0 16px 0 0; }
.vergleich-tabelle .vg-gruppe th{ padding-top:32px; font-weight:800; }
.vergleich-tabelle tbody tr:not(.vg-gruppe):hover{ background:var(--hover); }
.vg-legende{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:20px; color:var(--grey); font-size:14px; font-weight:600; }
.vg-legende > span{ display:inline-flex; align-items:center; }
.vg-legende .sym-ja{ background:var(--grey); }
.vg-legende .sym-optional{ border-bottom-color:var(--grey); }
@media (max-width:900px){
.vergleich-tabelle thead th:first-child, .vergleich-tabelle .vg-basis td:first-child, .vergleich-tabelle tbody th{ position:sticky; left:0; background:var(--bg); z-index:1; }
}
/* ---------- Paketseite: Text links, Info-Kasten rechts ---------- */
.paket-layout{ display:grid; grid-template-columns:minmax(0, 62ch) 300px; gap:48px; align-items:start; }
.paket-box{ position:sticky; top:24px; }
.paket-box .sval{ display:block; }
.paket-box .sym-ja{ background:var(--on-panel); }
.paket-box .sym-nein{ background:var(--panel-3); }
.paket-box .sym-optional{ border-bottom-color:var(--on-panel); }
.box-link{ display:block; margin-top:18px; padding-top:16px; border-top:1px solid var(--panel-line); color:var(--on-panel); font-weight:800; font-size:15px; text-decoration:underline; }
.box-link:hover{ opacity:.75; }
.btn--hell{ display:block; text-align:center; margin-top:16px; background:var(--on-panel); color:var(--panel); }
@container inhalt (max-width: 820px){
.paket-layout{ grid-template-columns:minmax(0,1fr); gap:32px; }
.paket-box{ position:static; order:-1; }
}
main > *{ min-width:0; max-width:100%; }
.tabelle{ position:relative; } /* hält versteckte Screenreader-Texte im Scrollbereich */
/* ==========================================================
Darstellung: Dunkelmodus und erhöhter Kontrast
- automatisch nach Systemeinstellung (prefers-color-scheme)
- dauerhaft erzwingbar über den Schalter im Footer:
html[data-theme="dark"|"light"], html.kontrast
========================================================== */
html[data-theme="dark"]{
--ink:#ececec; --grey:#a6a6a6; --bg:#121212; --on-ink:#121212; --text-2:#bdbdbd;
--line:#2f2f2f; --line-2:#3d3d3d; --line-3:#6e6e6e; --fill:#1e1e1e;
--hover:rgba(255,255,255,.04); --sheen:rgba(255,255,255,.28);
--panel:#1f1f1f; --on-panel:#ececec; --panel-2:#a6a6a6; --panel-3:#8f8f8f; --panel-line:#3d3d3d;
--err:#ff8a80; --ok:#6fcf9f; --logo-bg:#f2f2f2; --tiefe-a:.32;
color-scheme:dark;
}
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]){
--ink:#ececec; --grey:#a6a6a6; --bg:#121212; --on-ink:#121212; --text-2:#bdbdbd;
--line:#2f2f2f; --line-2:#3d3d3d; --line-3:#6e6e6e; --fill:#1e1e1e;
--hover:rgba(255,255,255,.04); --sheen:rgba(255,255,255,.28);
--panel:#1f1f1f; --on-panel:#ececec; --panel-2:#a6a6a6; --panel-3:#8f8f8f; --panel-line:#3d3d3d;
--err:#ff8a80; --ok:#6fcf9f; --logo-bg:#f2f2f2; --tiefe-a:.32;
color-scheme:dark;
}
}
/* erhöhter Kontrast, hell: reines Schwarz/Weiß, kräftige Linien, kein Hintergrund-Effekt */
html.kontrast{
--ink:#000; --grey:#2b2b2b; --bg:#fff; --on-ink:#fff; --text-2:#000;
--line:#000; --line-2:#000; --line-3:#000; --fill:#fff; --hover:rgba(0,0,0,.06);
--panel:#000; --on-panel:#fff; --panel-2:#e0e0e0; --panel-3:#d0d0d0; --panel-line:#fff;
--err:#9b0000; --ok:#005c33; --logo-bg:transparent; --tiefe-a:0;
}
/* erhöhter Kontrast, dunkel */
html.kontrast[data-theme="dark"]{
--ink:#fff; --grey:#e0e0e0; --bg:#000; --on-ink:#000; --text-2:#fff;
--line:#fff; --line-2:#fff; --line-3:#fff; --fill:#000; --hover:rgba(255,255,255,.1);
--panel:#000; --on-panel:#fff; --panel-2:#e0e0e0; --panel-3:#d0d0d0; --panel-line:#fff; --panel-rand:#fff;
--err:#ffb4ab; --ok:#8ff0bd; --logo-bg:#fff;
}
@media (prefers-color-scheme:dark){
html.kontrast:not([data-theme="light"]){
--ink:#fff; --grey:#e0e0e0; --bg:#000; --on-ink:#000; --text-2:#fff;
--line:#fff; --line-2:#fff; --line-3:#fff; --fill:#000; --hover:rgba(255,255,255,.1);
--panel:#000; --on-panel:#fff; --panel-2:#e0e0e0; --panel-3:#d0d0d0; --panel-line:#fff; --panel-rand:#fff;
--err:#ffb4ab; --ok:#8ff0bd; --logo-bg:#fff;
}
}
html.kontrast #tiefe{ display:none !important; }
html.kontrast main a:not(.btn):not(.card):not(.pcard):not(.chip):not(.logo-item):not(.skip){ text-decoration:underline; text-underline-offset:.18em; }
html.kontrast :focus-visible{ outline-width:3px !important; }
html.kontrast .card::after, html.kontrast a.card::before{ display:none; }
/* Logo, Burger und Kacheln folgen der Darstellung */
.lgo-mark, .lgo-word, .lgo-word path, .burger rect{ fill:var(--ink); }
body{ transition:background-color .25s ease, color .25s ease; }
/* Paket-Kacheln sind Farbflächen: Text bleibt dort immer dunkel */
.card{ --ink:#141414; --grey:#4a4a4a; color:var(--ink); }
html.kontrast .card{ --ink:#000; --grey:#000; }
/* Schalter im Footer */
.footer-schalter{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.footer-schalter:hover{ color:var(--ink); }
html.kontrast .is-current{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:2px; }
/* ==========================================================
Leuchtender Verlaufsrahmen für den Kasten (.summary) und Haupt-Buttons (.btn)
Aufbau (per JS eingefügt, site.js):
- .halo liegt 24px rund um die Fläche, eine feste Maske lässt nur den Rand durch:
2px kräftige Linie direkt an der Kante, dann weich auslaufender Schein.
- ein großes Quadrat mit Farbverlauf, das sich nur DREHT (transform).
Drehen erledigt die Grafikkarte, nichts wird pro Bild neu gezeichnet → flüssig.
Ohne JavaScript gibt es einfach keinen Rahmen.
========================================================== */
.summary, .btn:not(.btn--ghost):not(.btn--hell){ position:relative; }
.halo{
position:absolute; inset:-24px; pointer-events:none; overflow:hidden;
/* Maske, von unten nach oben: Fläche (C) -> weicher Schein waagrecht minus Fläche -> mal Schein senkrecht
(weiche Ecken) -> plus 2px-Linie (P) -> Fläche wieder ausstanzen */
-webkit-mask:linear-gradient(#000 0 0) center / calc(100% - 48px) calc(100% - 48px) no-repeat, linear-gradient(#000 0 0) center / calc(100% - 44px) calc(100% - 44px) no-repeat, linear-gradient(to bottom, transparent 0, rgba(0,0,0,.06) 6px, rgba(0,0,0,.18) 12px, rgba(0,0,0,.36) 17px, rgba(0,0,0,.55) 22px, rgba(0,0,0,.55) calc(100% - 22px), rgba(0,0,0,.36) calc(100% - 17px), rgba(0,0,0,.18) calc(100% - 12px), rgba(0,0,0,.06) calc(100% - 6px), transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.06) 6px, rgba(0,0,0,.18) 12px, rgba(0,0,0,.36) 17px, rgba(0,0,0,.55) 22px, rgba(0,0,0,.55) calc(100% - 22px), rgba(0,0,0,.36) calc(100% - 17px), rgba(0,0,0,.18) calc(100% - 12px), rgba(0,0,0,.06) calc(100% - 6px), transparent 100%), linear-gradient(#000 0 0) center / calc(100% - 48px) calc(100% - 48px) no-repeat;
-webkit-mask-composite:xor, source-over, source-in, source-out, source-over;
mask:linear-gradient(#000 0 0) center / calc(100% - 48px) calc(100% - 48px) no-repeat, linear-gradient(#000 0 0) center / calc(100% - 44px) calc(100% - 44px) no-repeat, linear-gradient(to bottom, transparent 0, rgba(0,0,0,.06) 6px, rgba(0,0,0,.18) 12px, rgba(0,0,0,.36) 17px, rgba(0,0,0,.55) 22px, rgba(0,0,0,.55) calc(100% - 22px), rgba(0,0,0,.36) calc(100% - 17px), rgba(0,0,0,.18) calc(100% - 12px), rgba(0,0,0,.06) calc(100% - 6px), transparent 100%), linear-gradient(to right, transparent 0, rgba(0,0,0,.06) 6px, rgba(0,0,0,.18) 12px, rgba(0,0,0,.36) 17px, rgba(0,0,0,.55) 22px, rgba(0,0,0,.55) calc(100% - 22px), rgba(0,0,0,.36) calc(100% - 17px), rgba(0,0,0,.18) calc(100% - 12px), rgba(0,0,0,.06) calc(100% - 6px), transparent 100%), linear-gradient(#000 0 0) center / calc(100% - 48px) calc(100% - 48px) no-repeat;
mask-composite:exclude, add, intersect, subtract, add;
}
.halo i{
position:absolute; left:50%; top:50%;
width:var(--d, 1200px); height:var(--d, 1200px); margin:calc(var(--d, 1200px) / -2) 0 0 calc(var(--d, 1200px) / -2);
background:conic-gradient(#5fd0b2, #86aac0, #a993d4, #e294b8, #e2bd5f, #5fd0b2);
animation:in1-dreh 12s linear infinite; will-change:transform;
}
@keyframes in1-dreh{ to{ transform:rotate(360deg); } }
/* während des Preloaders steht alles still (die Rechenzeit gehört der Logo-Animation) */
html.pl-aktiv .halo i{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .halo i{ animation:none; } }
/* im Kontrastmodus: klare Kante statt Effekt */
html.kontrast .halo{ display:none; }
/* ---------- Weiche (/foto) und Fotografie privat ---------- */
.weiche, .angebote{ margin-top:8px; }
.angebote .card h2{ font-size:21px; }
.angebote .card .vat{ font-weight:800; color:var(--ink); }
.fotogalerie{ margin-top:64px; }
.how > h2{ font-weight:800; font-size:23px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:24px; }
.galerie-filter{ margin-bottom:20px; }
.galerie-raster{ list-style:none; columns:3 240px; column-gap:12px; }
.galerie-raster li{ break-inside:avoid; margin:0 0 12px; }
.galerie-raster li[hidden]{ display:none; }
.galerie-raster img{ display:block; width:100%; height:auto; background:var(--fill); }
.galerie-raster li:focus{ outline:2px solid var(--fokus); outline-offset:3px; }
.galerie-mehr{ margin-top:16px; }
.galerie-filter[hidden], .galerie-mehr[hidden]{ display:none; }
.galerie-filter .chip{ font:inherit; font-weight:700; font-size:14px; line-height:1; cursor:pointer; }
.galerie-filter .chip:not(.is-aktiv){ background:var(--bg); color:var(--ink); }
[data-nur][hidden]{ display:none !important; }
/* Angebots-Kacheln mit Foto: Bild oben (4:3), Text darunter auf der Farbfläche */
.angebote .card--bild{ aspect-ratio:auto; max-height:none; padding-top:0; }
.card-foto{ position:relative; z-index:2; display:block; align-self:stretch; margin:0 -30px 28px; aspect-ratio:4/3; overflow:hidden; background:var(--fill); }
.card-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.card-foto .foto-2{ opacity:0; transition:opacity .7s ease; }
@media (hover:hover){
a.card:hover .card-foto .foto-2, a.card:focus-visible .card-foto .foto-2{ opacity:1; }
}
html.ruhig .card-foto .foto-2{ display:none; }
@media (prefers-reduced-motion:reduce){ .card-foto .foto-2{ display:none; } }
@media (max-width:900px){ .card-foto{ margin:0 -32px 28px; } }
.angebote .card--bild .price-wrap{ padding-top:24px; }