/* ============================================================
Cosmotax GmbH — Designsystem
Die Farben muessen zu FARBEN in site_config.py passen; von dort kommen
theme-color im , das Web-Manifest und die erzeugten Markenzeichen.
GESTALTUNGSIDEE
---------------
Die Bildmarke besteht aus drei Balken, deren rechte Kante um 45 Grad
angeschnitten ist. Dieser Anschnitt ist das einzige Formmerkmal, das die
Marke mitbringt — er wird hier zum durchgehenden Motiv: an Panels,
Karten, Bildrahmen und Auszeichnungen. Umgesetzt ueber --cut und
clip-path, damit ueberall derselbe Winkel steht.
KEINE FOTOGRAFIE. Die Altwebsite arbeitete mit gekauften Stockfotos, deren
Lizenz nicht mitgeliefert wurde. Statt sie zu uebernehmen, traegt das
Layout typografisch und mit Flaechen. Nebeneffekt: das groesste Element
der Startseite ist Text, der LCP haengt damit an der Schrift und nicht an
einem Bild-Download.
Reihenfolge: Grundlagen, Kopf, Bausteine, Seitentypen, Fuss.
============================================================ */
:root{
--ink:#16232E; /* Ueberschriften, dunkle Flaechen */
--ink-2:#1D3040; /* zweite Ebene auf dunklem Grund */
--blue:#0082CB; /* Markenblau, aus dem Logo gemessen */
--blue-d:#00669F; /* gedrueckt / hover */
--blue-l:#3DA9E8; /* Blau auf dunklem Grund */
--slate:#3F5364; /* zweite Logofarbe */
--paper:#FFFFFF;
--paper-2:#F2F6F9; /* abgesetzte Abschnitte */
--paper-3:#E7EEF4; /* Karten auf abgesetztem Grund */
--line:#D9E3EB;
--line-2:#EDF2F6;
--text:#33414E;
--text-2:#64748B;
--text-inv:#A9BCCB; /* Fliesstext auf dunklem Grund */
--green:#2E7D52;
--red:#B3261E;
/* Der Anschnitt aus der Bildmarke. Ein einziger Wert, damit der Winkel
ueberall gleich bleibt — 45 Grad ergibt sich, wenn Breite und Hoehe des
abgeschnittenen Dreiecks identisch sind. */
--cut:18px;
--cut-sm:10px;
--wrap:1180px;
/* Der seitliche Rand des Rasters. Als Variable, weil zwei Bausteine ihn
als negativen Aussenabstand spiegeln muessen, um randlos zu laufen —
mit einem fest eingetragenen Wert lief die Startseite unter 420px um
8px aus dem Fenster, sobald der Rand hier kleiner wurde. */
--pad:28px;
--radius:4px; /* bewusst knapp: die Marke ist kantig, nicht rund */
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--paper); color:var(--text);
font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size:16.5px; line-height:1.65;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* height:auto ist Pflicht, nicht Kosmetik. Jedes ![]()
traegt width- und
height-Attribute gegen Layoutspruenge. Wird die Breite dann per CSS
beschnitten, bliebe die Hoehe aus dem Attribut stehen und das Bild waere
verzerrt — auf dem Desktop unauffaellig, auf dem Telefon sofort sichtbar.
Regeln mit absichtlich fester Hoehe (.logo-img) sind spezifischer und
gewinnen weiterhin. */
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
strong,b{ font-weight:650; color:var(--ink); }
h1,h2,h3,h4{
font-family:'Manrope', 'Inter', system-ui, sans-serif;
color:var(--ink); line-height:1.14; font-weight:800;
letter-spacing:-0.022em;
}
h3,h4{ font-weight:700; letter-spacing:-0.014em; line-height:1.25; }
/* Deutsche Komposita sind lang: "Umsatzsteuervoranmeldung",
"Berufshaftpflichtversicherung". In einer grossen Ueberschrift passt so ein
Wort auf 320 px nicht in die Spalte und schiebt die ganze Seite zur Seite —
und zwar innerhalb des Textflusses, weshalb die Suche nach ueberstehenden
Kaesten nichts findet. hyphens:auto trennt nach den Regeln der Sprache aus
; overflow-wrap ist der Notnagel, wenn selbst das nicht reicht. */
h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; }
p,li,td,th,dd,figcaption,label{ overflow-wrap:break-word; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.wrap-narrow{ max-width:840px; margin:0 auto; padding:0 var(--pad); }
@media (max-width:420px){ :root{ --pad:20px; } }
section{ padding:104px 0; }
@media (max-width:900px){ section{ padding:76px 0; } }
@media (max-width:600px){ section{ padding:56px 0; } }
.band-2{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band-ink{ background:var(--ink); color:var(--text-inv); }
.band-ink h2,.band-ink h3,.band-ink strong{ color:#fff; }
/* Der Anschnitt der Bildmarke, unten rechts. */
.cut{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
/* ---------- Auszeichnungen ---------- */
.eyebrow{
display:inline-block; font-size:12.5px; font-weight:700; color:var(--blue);
text-transform:uppercase; letter-spacing:0.10em; margin-bottom:14px;
}
.eyebrow::before{
content:""; display:inline-block; width:18px; height:2px; background:var(--blue);
vertical-align:0.28em; margin-right:10px;
}
.band-ink .eyebrow{ color:var(--blue-l); }
.band-ink .eyebrow::before{ background:var(--blue-l); }
.lede{ font-size:19px; line-height:1.6; color:var(--text-2); }
@media (max-width:600px){ .lede{ font-size:17px; } }
/* Abschnittskopf: Auge, Ueberschrift, optional ein Absatz. Ueberall gleich,
damit der Rhythmus ueber die Seiten hinweg haelt. */
.sec-head{ max-width:680px; margin-bottom:52px; }
.sec-head h2{ font-size:clamp(27px, 3.4vw, 40px); }
.sec-head p{ margin-top:18px; color:var(--text-2); font-size:17px; }
.band-ink .sec-head p{ color:var(--text-inv); }
/* ============================================================ Kopf */
header{
position:sticky; top:0; z-index:60;
background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.header-inner{
max-width:var(--wrap); margin:0 auto; padding:14px 28px;
display:flex; align-items:center; justify-content:space-between; gap:20px;
}
/* Ohne flex-shrink:0 gibt ausgerechnet der Logo-Link nach, sobald die
Navigation eng wird — das Logo wurde so auf ein Drittel zusammengedrueckt. */
.header-inner > a{ flex-shrink:0; }
.logo-img{ height:34px; width:auto; display:block; }
@media (max-width:420px){ .logo-img{ height:28px; } }
header nav{ display:flex; align-items:center; gap:8px; }
.nav-links{ display:flex; align-items:center; gap:4px; }
/* Unterhalb dieser Breite uebernimmt das Burger-Menue. Wer Punkte ergaenzt,
prueft die Grenze neu: sobald Menue, Umschalter und CTA nicht mehr
nebeneinander passen, schiebt der Kopf die Seite nach rechts. */
@media (max-width:1060px){ .nav-links{ display:none; } }
.nav-links > a, .nav-drop-btn{
font:inherit; font-size:15px; font-weight:550; color:var(--ink);
text-decoration:none; white-space:nowrap; padding:9px 13px;
border-radius:var(--radius); background:none; border:none; cursor:pointer;
display:inline-flex; align-items:center; gap:6px;
transition:color .15s ease, background .15s ease;
}
.nav-links > a:hover, .nav-drop-btn:hover{ color:var(--blue); background:var(--paper-2); }
.nav-links > a.active, .nav-drop.active > .nav-drop-btn{ color:var(--blue); }
/* ---------- Ausklappmenue ---------- */
.nav-drop{ position:relative; }
.nav-drop-btn::after{
content:""; width:6px; height:6px; border-right:1.6px solid currentColor;
border-bottom:1.6px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
transition:transform .18s ease;
}
.nav-drop-btn[aria-expanded="true"]::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.nav-drop-panel{
position:absolute; top:calc(100% + 10px); left:0; min-width:264px;
background:#fff; border:1px solid var(--line); border-radius:var(--radius);
box-shadow:0 18px 44px rgba(22,35,46,.13), 0 2px 6px rgba(22,35,46,.06);
padding:8px; display:none;
}
.nav-drop-panel::before{
/* Schliesst die Luecke zwischen Schalter und Panel: ohne sie klappt das
Menue beim Hinuebersteuern der 10 px zu. */
content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop-btn[aria-expanded="true"] + .nav-drop-panel{ display:block; }
.nav-drop-panel a{
display:block; padding:10px 14px; font-size:14.5px; font-weight:550;
color:var(--ink); text-decoration:none; border-radius:var(--radius);
transition:background .12s ease, color .12s ease;
}
.nav-drop-panel a:hover{ background:var(--paper-2); color:var(--blue); }
.nav-drop-panel a.active{ color:var(--blue); }
/* ---------- Sprachumschalter ----------
Erscheint nur, wenn in site_config.py mehr als eine Sprache steht. */
.lang-switch{
display:flex; align-items:center; gap:1px; flex-shrink:0;
background:var(--paper-2); border:1px solid var(--line);
border-radius:var(--radius); padding:2px; margin-left:6px;
}
.lang-switch a{
font-size:12.5px; font-weight:700; letter-spacing:0.05em; line-height:1;
color:var(--text-2); padding:7px 9px; border-radius:2px; text-decoration:none;
transition:color .15s ease, background .15s ease;
}
.lang-switch a:hover{ color:var(--blue); }
/* aria-current markiert die laufende Sprache — dieselbe Angabe liest auch ein
Screenreader vor, eine zusaetzliche Klasse waere doppelt gepflegt. */
.lang-switch a[aria-current]{ color:#fff; background:var(--slate); }
@media (max-width:560px){ header .lang-switch{ display:none; } }
/* Im Burger-Menue: die Blockregel fuer .mobile-nav a zuruecknehmen. */
.mobile-nav .lang-switch{ margin:26px 0 0; justify-content:center; }
.mobile-nav .lang-switch a{
display:inline-flex; border-bottom:none; font-size:15px; padding:11px 18px;
}
/* ---------- Schaltflaechen ---------- */
.btn{
font-family:inherit; font-weight:650; font-size:15px; padding:12px 22px;
border-radius:var(--radius); text-decoration:none; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
border:1.5px solid transparent; white-space:nowrap;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-d); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--slate); background:var(--paper-2); }
/* Auf dunklem Grund kehrt sich der Geist-Knopf um. Beide dunklen Flaechen
muessen hier stehen: .cta-final traegt nicht die Klasse .band-ink, und mit
nur einem der beiden Selektoren erschien der Telefonknopf im
Abschluss-Abschnitt als weisser Kasten. */
.band-ink .btn-ghost, .cta-final .btn-ghost{
background:none; border-color:rgba(255,255,255,.30); color:#fff;
}
.band-ink .btn-ghost:hover, .cta-final .btn-ghost:hover{
border-color:#fff; background:rgba(255,255,255,.08);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
@media (max-width:600px){ header nav > .btn-primary{ display:none; } }
/* Textlink mit Pfeil — auf Karten und in Listen. */
.more{
font-size:14px; font-weight:650; color:var(--blue); text-decoration:none;
display:inline-flex; align-items:center; gap:7px;
}
.more::after{ content:"→"; transition:transform .18s ease; }
.more:hover::after{ transform:translateX(3px); }
.more:hover{ text-decoration:underline; }
/* ---------- Burger und mobiles Menue ---------- */
.menu-btn{
display:none; flex-direction:column; gap:5px; background:none; border:none;
cursor:pointer; padding:10px; margin-right:-10px;
}
.menu-btn span{ display:block; width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease; }
@media (max-width:1060px){ .menu-btn{ display:flex; } }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Das Menue steht im HTML ausserhalb von : ein Element mit
backdrop-filter wird zum Containing Block fuer position:fixed darin, und
das Menue haette sich dann gegen den Kopf statt gegen den Viewport
berechnet — sichtbar als auf Kopfhoehe zusammengeschnittene Flaeche. */
.mobile-nav{
display:none; position:fixed; top:63px; left:0; right:0; bottom:0;
background:#fff; z-index:59; padding:14px 28px 48px; overflow-y:auto;
overscroll-behavior:contain;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{
display:block; padding:14px 0; font-size:18px; font-weight:650;
color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2);
}
.mobile-nav .sub{ padding-left:16px; border-left:2px solid var(--line); margin:2px 0 6px; }
.mobile-nav .sub a{ font-size:15.5px; font-weight:500; color:var(--text-2); padding:11px 0; border-bottom:none; }
.mobile-nav .btn{ display:flex; margin-top:26px; }
/* ============================================================ Startseite */
.hero{ padding:0; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.22fr .78fr; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
/* min-width:0 an beiden Spalten: ein Grid-Element hat die Vorgabe
min-width:auto und schrumpft deshalb nicht unter seinen laengsten
unumbrochenen Inhalt. Bei langen Komposita schob genau das die Seite. */
.hero-grid > *{ min-width:0; }
.hero-copy{ padding:86px 56px 86px 0; align-self:center; }
@media (max-width:980px){ .hero-copy{ padding:64px 0 56px; } }
@media (max-width:600px){ .hero-copy{ padding:44px 0 40px; } }
/* Zwei Eingriffe gegen dieselbe Beobachtung: bei 55px trennte hyphens:auto
in der groessten Ueberschrift der Website "Steuer-recht" und
"internatio-nale". Die Trennung ist regelkonform, sieht dort aber nach
einem Fehler aus.
1. Deckel bei 48px statt 55px.
2. hyphens:manual nur hier. Das laengste Wort in den drei Sprachfassungen
ist "internationale" (14 Zeichen) und passt bei der Mindestgroesse von
31px auch in eine 280px breite Spalte, also auf ein 320px-Display.
overflow-wrap:break-word aus der Grundregel bleibt als Notnagel. */
.hero h1{ font-size:clamp(31px, 4.1vw, 48px); margin-bottom:22px; hyphens:manual; }
.hero h1 .hi{ color:var(--blue); }
.hero .lede{ max-width:560px; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
/* Das dunkle Panel rechts. Es traegt den Anschnitt der Bildmarke und laeuft
nach rechts aus dem Raster heraus bis zum Fensterrand. */
.hero-panel{
position:relative; background:var(--ink); color:var(--text-inv);
padding:64px 40px 64px 44px; align-self:stretch;
}
/* Zwei Pseudoelemente statt clip-path — und zwar aus einem Grund, der beim
ersten Versuch Zeit gekostet hat: clip-path beschneidet das Element
MITSAMT seiner Pseudoelemente. Die Verlaengerung nach rechts wurde damit
gleich wieder weggeschnitten, und die dunkle Flaeche endete am Raster
statt am Fensterrand.
::before zeichnet den Anschnitt unten links in Papierfarbe nach,
::after traegt die Verlaengerung. */
.hero-panel::before{
content:""; position:absolute; left:0; bottom:0; width:34px; height:34px;
background:linear-gradient(to bottom left,
transparent 0 50%, var(--paper) 50% 100%);
}
.hero-panel::after{
/* 50vw sind immer mehr als der Abstand zur Fensterkante; .hero traegt
overflow:hidden und schneidet den Ueberschuss ab. */
content:""; position:absolute; top:0; bottom:0; left:100%; width:50vw;
background:var(--ink);
}
.hero-panel > *{ position:relative; z-index:1; }
@media (max-width:980px){
.hero-panel{ padding:44px var(--pad); margin:0 calc(var(--pad) * -1); }
.hero-panel::after, .hero-panel::before{ content:none; }
}
.hero-panel .ph{
font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
letter-spacing:.10em; text-transform:uppercase; color:var(--blue-l);
margin-bottom:22px;
}
.hero-facts{ display:flex; flex-direction:column; gap:0; }
.hero-facts div{ padding:16px 0; border-top:1px solid rgba(255,255,255,.12); }
.hero-facts div:first-child{ border-top:none; padding-top:0; }
.hero-facts dt, .hero-facts .k{
font-size:12.5px; color:#7E93A6; letter-spacing:.04em; text-transform:uppercase;
font-weight:600; margin-bottom:5px;
}
.hero-facts dd, .hero-facts .v{
font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; color:#fff;
line-height:1.35;
}
.hero-facts .v a{ color:#fff; text-decoration:none; }
.hero-facts .v a:hover{ color:var(--blue-l); }
/* ============================================================ Unterseiten-Kopf */
.page-hero{ padding:52px 0 46px; background:var(--paper-2); border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(29px,4.2vw,44px); max-width:900px; }
.page-hero .lede{ max-width:680px; margin-top:18px; }
.breadcrumb{ font-size:13px; color:var(--text-2); margin-bottom:14px; }
.breadcrumb a{ color:var(--text-2); text-decoration:none; }
.breadcrumb a:hover{ color:var(--blue); text-decoration:underline; }
/* ============================================================ Bausteine */
/* ---------- Kartenraster ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card-grid.two{ grid-template-columns:repeat(2,1fr); }
@media (max-width:940px){ .card-grid, .card-grid.two{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:660px){ .card-grid, .card-grid.two{ grid-template-columns:1fr; } }
.card-grid > *{ min-width:0; }
.card{
--cut:16px;
position:relative; background:#fff; border:1px solid var(--line);
padding:30px 28px 28px; display:flex; flex-direction:column; gap:12px;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
transition:border-color .2s ease, background .2s ease;
}
.band-2 .card{ background:#fff; }
.card:hover{ border-color:var(--blue); }
.card .num{
font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
color:var(--blue); letter-spacing:.08em;
}
.card h3{ font-size:20px; }
.card p{ font-size:15px; color:var(--text-2); flex-grow:1; }
.card .more{ margin-top:4px; }
/* Die ganze Karte anklickbar machen, ohne den Link zu verschachteln. */
.card .more::before{ content:""; position:absolute; inset:0; }
/* ---------- Merkmalsliste mit Haken ---------- */
.check-list{ list-style:none; display:grid; gap:12px; }
.check-list li{ position:relative; padding-left:30px; font-size:16px; }
.check-list li::before{
content:""; position:absolute; left:0; top:.52em;
width:14px; height:8px; border-left:2.2px solid var(--blue);
border-bottom:2.2px solid var(--blue); transform:rotate(-45deg);
}
.band-ink .check-list li::before{ border-color:var(--blue-l); }
.check-list.two{ grid-template-columns:1fr 1fr; gap:12px 32px; }
@media (max-width:720px){ .check-list.two{ grid-template-columns:1fr; } }
/* ---------- Zahlenband ---------- */
.fact-band{ padding:0; }
.fact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); }
@media (max-width:820px){ .fact-grid{ grid-template-columns:1fr 1fr; } }
/* Unter 560px eine Spalte. Zu zweit blieben fuer eine Kachel rund 150px, und
"Key Will Group" in 36px passt dort nicht mehr hinein — das Raster schob
die Startseite um 100px nach rechts. min-width:0 nimmt dem Rasterfeld
zusaetzlich die Vorgabe min-width:auto, mit der es nie unter seinen
laengsten Inhalt schrumpft. */
@media (max-width:560px){ .fact-grid{ grid-template-columns:1fr; } }
.fact{ background:var(--ink); padding:38px 26px; min-width:0; }
.fact .n{
font-family:'Manrope',sans-serif; font-size:clamp(27px, 5.2vw, 36px);
font-weight:800; color:#fff; line-height:1.05; overflow-wrap:break-word;
}
.fact .l{ font-size:14px; color:var(--text-inv); margin-top:8px; }
@media (max-width:600px){ .fact{ padding:26px 20px; } }
/* ---------- Ablauf ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:24px; border-top:2px solid var(--line); counter-increment:s; }
.step::before{
content:counter(s,decimal-leading-zero); position:absolute; top:-2px; left:0;
border-top:2px solid var(--blue); padding-top:22px;
font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
color:var(--blue); letter-spacing:.08em;
}
.step h3{ font-size:18px; margin:26px 0 8px; }
.step p{ font-size:15px; color:var(--text-2); }
/* ---------- Zweispalter Text + Beiwerk ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:40px; } }
.split > *{ min-width:0; }
.split.narrow{ grid-template-columns:.9fr 1.1fr; }
@media (max-width:900px){ .split.narrow{ grid-template-columns:1fr; } }
/* ---------- Fliesstext ---------- */
.prose{ max-width:760px; }
.prose > * + *{ margin-top:20px; }
.prose h2{ font-size:clamp(24px,3vw,32px); margin-top:56px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:20px; margin-top:38px; }
.prose p{ font-size:16.5px; }
.prose ul,.prose ol{ padding-left:22px; display:grid; gap:9px; }
.prose ul.check-list{ padding-left:0; }
.prose li{ font-size:16.5px; }
.prose a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.prose .lede{ font-size:18.5px; color:var(--text-2); }
/* Ein hervorgehobener Merksatz — ersetzt die fehlende Bildebene. */
.pull{
--cut:14px;
border-left:3px solid var(--blue); background:var(--paper-2);
padding:22px 26px; font-size:17px; color:var(--ink); font-weight:550;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.band-2 .pull{ background:#fff; }
/* ---------- Beschriftete Tabelle ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:15.5px; min-width:460px; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-family:'Manrope',sans-serif; font-weight:700; color:var(--ink); background:var(--paper-2); }
/* ---------- Fragen und Antworten ---------- */
.faq-list{ border-top:1px solid var(--line); max-width:860px; }
details{ border-bottom:1px solid var(--line); padding:20px 0; }
summary{
cursor:pointer; font-family:'Manrope',sans-serif; font-size:17.5px;
color:var(--ink); font-weight:700; list-style:none; display:flex;
justify-content:space-between; align-items:flex-start; gap:24px;
letter-spacing:-0.012em;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
content:""; flex-shrink:0; width:11px; height:11px; margin-top:7px;
border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
transform:rotate(45deg); transition:transform .2s ease;
}
details[open] summary::after{ transform:rotate(-135deg); }
details > *:not(summary){ margin-top:14px; max-width:760px; color:var(--text-2); font-size:16px; }
details ul{ padding-left:22px; display:grid; gap:8px; }
/* ---------- Abschluss-Aufforderung ---------- */
.cta-final{ background:var(--ink); color:var(--text-inv); }
.cta-final h2{ font-size:clamp(27px,3.6vw,40px); color:#fff; margin-bottom:16px; }
.cta-final p{ max-width:560px; font-size:17px; margin-bottom:32px; }
.cta-final .hero-ctas{ gap:12px; }
/* ============================================================ Kontakt */
/* Links der Text, rechts die Kontaktkarte. Vorher stand links das
Formular; das Verhaeltnis passt weiterhin, weil die Karte auch jetzt die
schmalere Spalte ist. */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }
.contact-grid > *{ min-width:0; }
/* Die Formularregeln standen hier bis zum 20.08.2026. Mit dem
Kontaktformular sind sie entfallen — Eingabefelder, Statusmeldungen und
das aus dem Sichtfeld geschobene Honigtopf-Feld. Wer das Formular
zurueckholt, findet sie in der Versionsgeschichte. */
.info-card{
--cut:20px;
background:var(--ink); color:var(--text-inv); padding:34px 32px;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.info-card h2{ font-size:20px; color:#fff; margin-bottom:20px; }
.info-row{ display:flex; gap:16px; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); font-size:15px; }
.info-row:first-of-type{ border-top:none; padding-top:0; }
.info-row .k{ color:#7E93A6; min-width:92px; flex-shrink:0; }
.info-row .v{ color:#fff; font-weight:600; }
/* Ohne Formular ist die Karte der einzige Weg zum Kontakt — die Adressen
muessen als anklickbar zu erkennen sein und nicht wie Text aussehen. */
.info-row a{
color:#fff; font-weight:600; text-decoration:underline;
text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px;
}
.info-row a:hover{ color:var(--blue-l); text-decoration-color:var(--blue-l); }
.hero-ctas + .pull{ margin-top:4px; }
.prose .hero-ctas{ margin-top:24px; }
/* ============================================================ Rechtstexte */
.legal{ max-width:820px; }
.legal h2{ font-size:23px; margin-top:48px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:17.5px; margin-top:30px; }
.legal > * + *{ margin-top:16px; }
.legal p,.legal li{ font-size:16px; color:var(--text); }
.legal ul,.legal ol{ padding-left:22px; display:grid; gap:8px; }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
/* Breite Tabellen scrollen in sich selbst, nie die Seite. */
.legal .table-scroll{ margin-top:16px; }
.legal-toc{
--cut:14px;
background:var(--paper-2); border:1px solid var(--line); padding:22px 26px;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.legal-toc p{ font-family:'Manrope',sans-serif; font-weight:700; color:var(--ink); font-size:14px; margin-bottom:10px; }
.legal-toc ol{ margin:0; padding-left:20px; font-size:15px; gap:6px; }
.legal-toc a{ color:var(--ink); text-decoration:none; }
.legal-toc a:hover{ color:var(--blue); text-decoration:underline; }
.company-box{
--cut:16px;
background:var(--paper-2); border-left:3px solid var(--blue); padding:24px 28px;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.company-box p{ margin:0 0 4px; color:var(--ink); font-size:16px; }
.company-box .muted{ color:var(--text-2); font-size:14.5px; margin-top:10px; }
/* ============================================================ Fehlerseite */
.error-page{ padding:110px 0 90px; }
.error-code{
font-family:'Manrope',sans-serif; font-size:clamp(72px,13vw,150px);
font-weight:800; color:var(--paper-3); line-height:.86; letter-spacing:-.04em;
}
.error-page h1{ font-size:clamp(26px,3.4vw,36px); margin:8px 0 14px; }
.error-page .lede{ max-width:520px; margin-bottom:32px; }
.error-links{ display:flex; flex-direction:column; gap:2px; max-width:420px; }
.error-links a{
display:flex; justify-content:space-between; gap:16px; padding:14px 0;
border-top:1px solid var(--line); color:var(--ink); font-weight:600;
text-decoration:none; font-size:16px;
}
.error-links a:last-child{ border-bottom:1px solid var(--line); }
.error-links a:hover{ color:var(--blue); }
/* ============================================================ Cookie-Hinweis */
#cookie-banner{
display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
background:var(--ink); color:var(--text-inv); padding:20px 28px;
gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
box-shadow:0 -8px 30px rgba(22,35,46,.22);
}
#cookie-banner.show{ display:flex; }
#cookie-banner p{ font-size:14px; max-width:680px; margin:0; }
#cookie-banner a{ color:#fff; text-decoration:underline; }
#cookie-banner .cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-cookie-accept{ background:var(--blue); color:#fff; border:none; padding:11px 20px; border-radius:var(--radius); font-family:inherit; font-weight:650; font-size:14px; cursor:pointer; }
.btn-cookie-accept:hover{ background:var(--blue-d); }
.btn-cookie-decline{ background:none; color:#fff; border:1.5px solid rgba(255,255,255,.35); padding:11px 20px; border-radius:var(--radius); font-family:inherit; font-weight:650; font-size:14px; cursor:pointer; }
.btn-cookie-decline:hover{ border-color:#fff; }
/* ============================================================ Fuss */
footer{ background:var(--ink); color:var(--text-inv); padding:64px 0 28px; font-size:14.5px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px; }
@media (max-width:940px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; gap:30px; } }
.footer-top > *{ min-width:0; }
.footer-logo{ height:30px; width:auto; margin-bottom:18px; }
.footer-intro{ font-size:14.5px; color:var(--text-inv); max-width:320px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer-h{
font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:800;
color:#fff; text-transform:uppercase; letter-spacing:.09em; margin-bottom:6px;
}
.footer-col a{ color:var(--text-inv); text-decoration:none; line-height:1.45; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-addr{ line-height:1.65; color:var(--text-inv); }
.footer-bottom{
display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 28px;
padding-top:24px; border-top:1px solid rgba(255,255,255,.13); font-size:13.5px;
}
.footer-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a{ color:var(--text-inv); text-decoration:none; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }
.footer-linkbtn{
background:none; border:none; padding:0; font:inherit; color:var(--text-inv);
cursor:pointer; text-decoration:none;
}
.footer-linkbtn:hover{ color:#fff; text-decoration:underline; }
.footer-credit a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.footer-credit a:hover{ border-bottom-color:#fff; }
/* ============================================================ Kleinkram */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:100; background:var(--blue);
color:#fff; padding:12px 20px; font-weight:650; text-decoration:none;
}
.skip-link:focus{ left:0; }
picture{ display:block; }
.prose-img{ margin:32px 0; }
.prose-img img{ width:100%; border:1px solid var(--line); }
.prose-img figcaption{ margin-top:10px; font-size:13.5px; color:var(--text-2); }
/* Einblenden beim Scrollen. Die Elemente starten unsichtbar; main.js hat
dafuer einen Nachlauf, falls der IntersectionObserver ein Element
ueberspringt (Sprungmarke, wiederhergestellte Scrollposition). */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.card-grid .reveal:nth-child(2),.steps .reveal:nth-child(2),.fact-grid .reveal:nth-child(2){ transition-delay:.07s; }
.card-grid .reveal:nth-child(3),.steps .reveal:nth-child(3),.fact-grid .reveal:nth-child(3){ transition-delay:.14s; }
.card-grid .reveal:nth-child(4),.steps .reveal:nth-child(4),.fact-grid .reveal:nth-child(4){ transition-delay:.21s; }
.card-grid .reveal:nth-child(5){ transition-delay:.28s; }
.card-grid .reveal:nth-child(6){ transition-delay:.35s; }