/* ============================================================ ESCALT GmbH — Shared Stylesheet ("Editorial" design system) Used by: index.html, handwerk.html, kontakt.html, impressum.html, datenschutz.html, cookies.html, agb.html ============================================================ */ :root{ --navy:#001C45; --blue:#2585CF; --paper:#FFFFFF; --paper-2:#F5F7FA; --line:#E3E8EF; --text-2:#5B6472; --green:#2E9E5B; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--paper); color:var(--navy); font-family:'Inter', sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; } /* height:auto ist hier nicht Kosmetik, sondern Pflicht. Jedes traegt width- und height-Attribute (gegen CLS). Wird die Breite dann per CSS beschnitten — hier durch max-width:100% —, bleibt die Hoehe aus dem Attribut stehen und das Bild wird verzerrt. Genau das passierte mit dem KI-Agenten-Banner: 1100x634 in einem 320 px breiten Viewport, die Hoehe blieb bei 634 px und das Motiv war senkrecht gestreckt. Auf dem Desktop fiel es nicht auf, weil der Container dort fast der natuerlichen Breite entspricht. Regeln mit absichtlich fester Hoehe (.logo-img) sind spezifischer und gewinnen weiterhin. */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } h1,h2,h3{ font-family:'Source Serif 4', serif; font-weight:600; color:var(--navy); line-height:1.15; letter-spacing:-0.005em; } /* Deutsche Komposita sind lang: "Handwerksbetriebe", "Vermoegensschaden- haftpflichtversicherung". In einer grossen Ueberschrift passte so ein Wort auf 320 px nicht mehr in die Spalte und schob die ganze Seite um 10 px nach rechts, auf /agb/ um 25 px — ohne dass ein Element sichtbar herausragte, weshalb die uebliche Suche nach ueberstehenden Kaesten nichts fand. hyphens:auto trennt sauber nach deutschen Regeln, weil gesetzt ist. overflow-wrap:break-word ist der Notnagel fuer den Fall, dass ein Wort selbst getrennt nicht passt; es greift nur dann und aendert das Schriftbild bei normaler Breite nicht. */ h1,h2,h3,h4,summary{ overflow-wrap:break-word; hyphens:auto; } p,li,td,th,dd,figcaption{ overflow-wrap:break-word; } :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; } .wrap-narrow{ max-width:820px; margin:0 auto; padding:0 28px; } section{ padding:100px 0; } @media (max-width:720px){ section{ padding:60px 0; } } .eyebrow{ font-size:13px; color:var(--blue); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; } /* ---------- Header ---------- */ header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .header-inner{ max-width:1120px; margin:0 auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; } /* Der Logo-Link darf nicht schrumpfen. Ohne flex-shrink:0 gibt im Header ausgerechnet er nach, sobald die Navigation eng wird — das Logo wurde so bis auf 36 px zusammengedrueckt statt der vorgesehenen 87 px. */ .header-inner > a{ flex-shrink:0; } .logo-img{ height:32px; width:auto; display:block; } nav{ display:flex; align-items:center; gap:36px; } .nav-links{ display:flex; gap:28px; } /* Sechs Menuepunkte plus CTA brauchen mehr Platz als die frueheren fuenf. Unterhalb dieser Breite uebernimmt das Burger-Menue. */ @media (max-width:1000px){ .nav-links{ display:none; } } /* Auf schmalen Geraeten passen Logo, CTA-Button und Burger nicht nebeneinander — der Header schob die Seite um rund 80 px nach rechts. Der CTA entfaellt hier, im Burger-Menue steht derselbe Button weiterhin bereit. */ @media (max-width:600px){ header nav > .btn-primary{ display:none; } } nav a{ text-decoration:none; font-size:15px; color:var(--navy); font-weight:500; white-space:nowrap; } nav a:hover, nav a.active{ color:var(--blue); } .btn{ font-weight:600; font-size:15px; padding:13px 24px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1.5px solid transparent; cursor:pointer; transition:background 0.15s ease, transform 0.15s ease; } .btn-primary{ background:var(--blue); color:#fff; } .btn-primary:hover{ background:#1c6cab; transform:translateY(-1px); } .btn-ghost{ border-color:var(--line); color:var(--navy); } .btn-ghost:hover{ border-color:var(--blue); color:var(--blue); } .btn:disabled{ opacity:0.6; cursor:not-allowed; } .menu-btn{ display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .menu-btn span{ display:block; width:22px; height:2px; background:var(--navy); transition:transform 0.25s ease, opacity 0.25s ease; } @media (max-width:1000px){ .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); } .mobile-nav{ display:none; position:fixed; top:65px; left:0; right:0; bottom:0; background:#fff; z-index:49; padding:12px 28px 40px; overflow-y:auto; } .mobile-nav.open{ display:block; } .mobile-nav a{ display:block; padding:14px 0; font-size:18px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); } .mobile-nav .btn{ display:block; text-align:center; margin-top:24px; } /* ---------- Hero (home) ---------- */ .hero{ padding:96px 0 90px; } .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; } @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } } /* Grid-Kinder haben von Haus aus min-width:auto und koennen daher nicht unter die Breite ihres Inhalts schrumpfen. Auf 320 px erzwang der lange CTA-Text so eine 302 px breite Spalte in einem 264 px breiten Raster — die Seite lief um 10 px ueber. */ .hero-grid > *{ min-width:0; } .hero-copy > *{ animation:fadeUp 0.7s ease both; } .hero-copy > *:nth-child(1){ animation-delay:0.05s; } .hero-copy > *:nth-child(2){ animation-delay:0.15s; } .hero-copy > *:nth-child(3){ animation-delay:0.25s; } .hero-copy > *:nth-child(4){ animation-delay:0.35s; } .hero-copy > *:nth-child(5){ animation-delay:0.45s; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } .hero h1{ font-size:clamp(34px, 4.6vw, 54px); margin:16px 0 24px; } .hero h1 .hi{ color:var(--blue); } .hero p.lede{ font-size:18px; color:var(--text-2); max-width:560px; margin-bottom:34px; } .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; } .hero-meta{ display:flex; gap:24px; flex-wrap:wrap; font-size:13.5px; color:var(--text-2); } .hero-meta b{ color:var(--navy); font-weight:600; } .hero-art{ display:flex; justify-content:center; animation:fadeUp 0.9s ease 0.3s both; } .hero-photo-frame{ position:relative; width:100%; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,28,69,0.18), 0 4px 14px rgba(0,28,69,0.10); } .hero-photo-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,28,69,0) 55%, rgba(0,28,69,0.26) 100%); pointer-events:none; } .hero-photo-frame img{ width:100%; height:auto; display:block; } .hero-badge{ position:absolute; left:20px; bottom:20px; z-index:2; background:rgba(255,255,255,0.94); backdrop-filter:blur(4px); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--navy); box-shadow:0 6px 18px rgba(0,28,69,0.16); } /* ---------- Page header (inner pages) ---------- */ .page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); } .page-hero h1{ font-size:clamp(28px,4vw,42px); margin-top:12px; } .page-hero p{ color:var(--text-2); font-size:16px; max-width:640px; margin-top:14px; } .breadcrumb{ font-size:13px; color:var(--text-2); margin-bottom:10px; } .breadcrumb a{ color:var(--blue); text-decoration:none; } .breadcrumb a:hover{ text-decoration:underline; } /* ---------- Trust bar ---------- */ .trust{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0; } .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; } @media (max-width:760px){ .trust-grid{ grid-template-columns:1fr 1fr; } } .trust-grid .n{ font-family:'Source Serif 4', serif; font-size:32px; font-weight:700; color:var(--navy); } .trust-grid .l{ font-size:13px; color:var(--text-2); margin-top:4px; } .trust-grid .reveal:nth-child(2){ transition-delay:0.08s; } .trust-grid .reveal:nth-child(3){ transition-delay:0.16s; } .trust-grid .reveal:nth-child(4){ transition-delay:0.24s; } /* ---------- Services list ---------- */ .services-list{ display:flex; flex-direction:column; margin-top:48px; } .service-row{ display:grid; grid-template-columns:44px 1fr 1fr; gap:32px; padding:34px 0; border-top:1px solid var(--line); align-items:start; transition:background 0.25s ease, padding-left 0.25s ease; } .service-row:last-child{ border-bottom:1px solid var(--line); } .service-row:hover{ background:var(--paper-2); padding-left:16px; margin-left:-16px; padding-right:16px; margin-right:-16px; border-radius:8px; } @media (max-width:820px){ .service-row{ grid-template-columns:1fr; gap:10px; } } .service-row .idx{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); color:var(--blue); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; transition:background 0.25s ease, color 0.25s ease; } .service-row:hover .idx{ background:var(--blue); color:#fff; } .service-row h3{ font-size:21px; margin-bottom:8px; } .service-row p{ color:var(--text-2); font-size:15px; } .service-row a.more{ font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none; } .service-row a.more:hover{ text-decoration:underline; } .services-list .reveal:nth-child(2){ transition-delay:0.05s; } .services-list .reveal:nth-child(3){ transition-delay:0.10s; } .services-list .reveal:nth-child(4){ transition-delay:0.15s; } .services-list .reveal:nth-child(5){ transition-delay:0.20s; } .services-list .reveal:nth-child(6){ transition-delay:0.25s; } .services-list .reveal:nth-child(7){ transition-delay:0.30s; } .services-list .reveal:nth-child(8){ transition-delay:0.35s; } .services-list .reveal:nth-child(9){ transition-delay:0.40s; } /* ---------- KI spotlight ---------- */ .ki-spot{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .ki-photo{ border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,28,69,0.14); margin-top:40px; } .ki-photo img{ width:100%; display:block; } /* ---------- Nearshore ---------- */ .nearshore-grid{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:center; } @media (max-width:860px){ .nearshore-grid{ grid-template-columns:1fr; } } .nearshore-photo{ border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(0,28,69,0.14); } .nearshore-list{ list-style:none; margin-top:24px; } .nearshore-list li{ padding:10px 0 10px 28px; position:relative; font-size:15px; color:var(--text-2); border-top:1px solid var(--line); } .nearshore-list li:first-child{ border-top:none; } .nearshore-list li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; } /* wrap ist Pflicht: ohne es sprengen mehrere Tags die Kartenbreite und die ganze Seite scrollt horizontal */ .flags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; font-size:13px; color:var(--text-2); } .flag-tag{ background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:6px 14px; } /* ---------- Digitalbonus banner ---------- */ .bonus{ background:var(--navy); color:#fff; border-radius:20px; margin:0 28px; padding:72px 48px; } @media (max-width:720px){ .bonus{ margin:0 16px; padding:48px 28px; } } .bonus-inner{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; } @media (max-width:760px){ .bonus-inner{ grid-template-columns:1fr; text-align:center; } } .bonus .eyebrow{ color:#8FB4E6; } .bonus h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:14px; } .bonus p{ color:#B9CBE8; max-width:480px; font-size:16px; } .bonus-figure{ font-size:clamp(64px,8vw,96px); font-weight:800; text-align:center; line-height:0.9; color:var(--blue); font-family:'Inter',sans-serif; } .bonus-figure small{ display:block; font-size:13px; font-weight:500; color:#B9CBE8; margin-top:8px; text-transform:uppercase; letter-spacing:0.06em; } /* ---------- Referenzen ---------- */ .ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; } @media (max-width:900px){ .ref-grid{ grid-template-columns:1fr; } } /* Grid-Kinder haben per Default min-width:auto und koennen dadurch nicht unter ihre Inhaltsbreite schrumpfen — ohne min-width:0 laeuft die Spur ueber und die Seite bekommt einen horizontalen Scrollbalken. */ .ref-card{ min-width:0; border:1px solid var(--line); border-radius:12px; padding:28px 24px; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Screenshot der umgesetzten Website, randlos oben in der Karte. Die negativen Margins heben das Kartenpolster auf; der Radius ist 11px statt 12px, damit das Bild innerhalb des 1px-Rahmens sitzt und nicht darueber. */ .ref-shot{ display:block; margin:-28px -24px 20px; overflow:hidden; border-radius:11px 11px 0 0; border-bottom:1px solid var(--line); background:var(--paper-2); } .ref-shot img{ display:block; width:100%; height:auto; } /* Der Screenshot ist ein zweiter Link auf dasselbe Ziel wie "Zur Website" und traegt aria-hidden + tabindex=-1: fuer die Tastatur und Screenreader waere er eine reine Dopplung. Der Hover-Effekt bleibt als visueller Hinweis. */ .ref-shot img{ transition:transform 0.4s ease; } .ref-card:hover .ref-shot img{ transform:scale(1.03); } @media (prefers-reduced-motion: reduce){ .ref-card:hover .ref-shot img{ transform:none; } } .ref-card .flags{ gap:8px; font-size:12px; } .ref-card .flag-tag{ padding:4px 11px; } .ref-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,28,69,0.08); border-color:#C7D6EA; } .ref-card .client{ font-weight:700; font-size:19px; color:var(--navy); margin-bottom:4px; font-family:'Source Serif 4',serif; } .ref-card .sector{ font-size:12.5px; color:var(--blue); font-weight:600; margin-bottom:16px; display:block; text-transform:uppercase; letter-spacing:0.04em; } .ref-card p{ font-size:14px; color:var(--text-2); margin-bottom:14px; } /* margin-top fehlte: die Trennlinie sass ohne Abstand direkt unter der letzten Leistungsmarke. padding-top wirkt nur unterhalb der Linie, oberhalb braucht es einen eigenen Abstand. */ .ref-card .proof{ font-size:13px; color:var(--navy); font-weight:600; border-top:1px solid var(--line); margin-top:28px; padding-top:16px; } /* Die Marken sind Flex-Elemente mit Zeilenumbruch. Ihre Unterkante ist nicht automatisch die Unterkante des Containers, sobald die letzte Zeile nur teilweise gefuellt ist — deshalb hier zusaetzlich Luft unter dem Markenblock statt sich allein auf das margin des naechsten Elements zu verlassen. */ .ref-card .flags{ margin-bottom:4px; } .ref-grid .reveal:nth-child(2){ transition-delay:0.08s; } .ref-grid .reveal:nth-child(3){ transition-delay:0.16s; } /* ---------- FAQ ---------- */ .faq-list{ margin-top:40px; } details{ border-bottom:1px solid var(--line); padding:22px 0; } details:first-child{ border-top:1px solid var(--line); } summary{ cursor:pointer; font-size:17px; color:var(--navy); font-weight:700; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; letter-spacing:-0.01em; font-family:'Source Serif 4',serif; } summary::-webkit-details-marker{ display:none; } summary::after{ content:"+"; font-size:20px; color:var(--blue); font-weight:400; flex-shrink:0; transition:transform 0.2s ease; font-family:'Inter',sans-serif; } details[open] summary::after{ transform:rotate(45deg); } details p{ margin-top:14px; font-size:14.5px; color:var(--text-2); max-width:680px; } .faq-list details:nth-child(2){ transition-delay:0.05s; } .faq-list details:nth-child(3){ transition-delay:0.10s; } .faq-list details:nth-child(4){ transition-delay:0.15s; } /* ---------- Process flow diagram ---------- */ .flow{ margin-top:56px; position:relative; } .flow-line{ position:absolute; top:23px; left:0; right:0; height:2px; background:var(--line); z-index:0; } .flow-line-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:var(--blue); transition:width 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s; } .flow.in-view .flow-line-fill{ width:100%; } .flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:1; } .flow-step{ text-align:center; } /* Unter 760 px bricht das Raster auf zwei Spalten um. Die durchgehende .flow-line liegt aber absolut auf top:23px und trifft damit nur noch die erste Zeile — bei 03 und 04 fehlte die Verbindung ganz. Statt einer Linie fuer alles bekommt hier jeder Schritt seinen eigenen Verbinder nach rechts, und der letzte je Zeile keinen. Die Breite: Abstand zwischen zwei Punktmitten ist Spaltenbreite + 20 px Gap, davon gehen zweimal 24 px Punktradius ab — bleibt calc(100% - 28px). */ @media (max-width:760px){ .flow-steps{ grid-template-columns:1fr 1fr; row-gap:36px; } .flow-line{ display:none; } .flow-step{ position:relative; } .flow-step::after{ content:""; position:absolute; top:23px; left:calc(50% + 24px); width:calc(100% - 28px); height:2px; background:var(--line); transition:background-color 0.5s ease; } /* Jeder zweite Schritt schliesst eine Zeile ab und braucht keinen Verbinder. */ .flow-step:nth-child(2n)::after{ content:none; } .flow.in-view .flow-step::after{ background:var(--blue); } .flow.in-view .flow-step:nth-child(1)::after{ transition-delay:0.3s; } .flow.in-view .flow-step:nth-child(3)::after{ transition-delay:1.1s; } } .flow-dot{ width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--text-2); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-weight:700; font-family:'Source Serif 4',serif; font-size:17px; transition:border-color 0.5s ease, color 0.5s ease, background 0.5s ease, transform 0.4s ease; } .flow.in-view .flow-dot{ border-color:var(--blue); color:#fff; background:var(--blue); } .flow-step:nth-child(1) .flow-dot{ transition-delay:0.1s; } .flow-step:nth-child(2) .flow-dot{ transition-delay:0.5s; } .flow-step:nth-child(3) .flow-dot{ transition-delay:0.9s; } .flow-step:nth-child(4) .flow-dot{ transition-delay:1.3s; } .flow-step h4{ font-family:'Source Serif 4',serif; font-size:16px; font-weight:600; color:var(--navy); margin-bottom:6px; } .flow-step p{ font-size:13px; color:var(--text-2); } /* ---------- Final CTA ---------- */ .cta-final{ text-align:center; } .cta-final h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; } .cta-final p{ color:var(--text-2); max-width:480px; margin:0 auto 34px; font-size:16px; } .cta-final .hero-ctas{ justify-content:center; } /* ---------- Contact page ---------- */ .contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; } @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } } .form-field{ margin-bottom:20px; } .form-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:6px; } .form-field input, .form-field select, .form-field textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px; font-family:'Inter',sans-serif; font-size:15px; color:var(--navy); background:#fff; transition:border-color 0.15s ease; } /* Maus-/Touch-Fokus: nur die Rahmenfarbe, kein Outline-Ring. */ .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--blue); outline:none; } /* Tastaturfokus braucht einen sichtbaren Ring (WCAG 2.4.7). Ohne diese Regel gewinnt das obige outline:none durch hoehere Spezifitaet gegen :focus-visible. */ .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; } .form-field textarea{ resize:vertical; min-height:130px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:520px){ .form-row{ grid-template-columns:1fr; } } .form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-2); margin:18px 0 22px; } .form-consent input{ margin-top:3px; } .form-consent a{ color:var(--blue); text-decoration:underline; } .form-note{ font-size:12.5px; color:var(--text-2); margin-top:10px; } .form-status{ padding:14px 16px; border-radius:8px; font-size:14px; margin-bottom:20px; display:none; } .form-status.show{ display:block; } .form-status.success{ background:#E7F6EC; color:var(--green); border:1px solid #BEE6CB; } .form-status.error{ background:#FBE9E9; color:#B3261E; border:1px solid #F3C6C6; } .contact-info-card{ background:var(--paper-2); border-radius:16px; padding:32px; border:1px solid var(--line); } .contact-info-card h3{ font-size:19px; margin-bottom:18px; } .contact-info-row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px; } .contact-info-row:first-of-type{ border-top:none; padding-top:0; } .contact-info-row .label{ color:var(--text-2); min-width:90px; } .contact-info-row a{ color:var(--navy); text-decoration:none; font-weight:600; } .contact-info-row a:hover{ color:var(--blue); } /* ---------- Legal / content pages (Impressum, Datenschutz, Cookies, AGB) ---------- */ .legal-content{ max-width:820px; } .legal-content h2{ font-size:22px; margin-top:44px; margin-bottom:14px; } .legal-content h2:first-child{ margin-top:0; } .legal-content h3{ font-size:17px; margin-top:26px; margin-bottom:10px; } .legal-content p{ font-size:15.5px; color:var(--text-2); margin-bottom:14px; } .legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-2); font-size:15.5px; } .legal-content li{ margin-bottom:8px; } .legal-content a{ color:var(--blue); text-decoration:underline; } /* Vierspaltige Tabelle mit langen Zellinhalten (Cookie-Richtlinie): unter 600 px passte sie nicht mehr und schob die Seite um bis zu 299 px nach rechts. Tabellen schrumpfen nicht unter ihre Mindestbreite, deshalb darf hier nur die Tabelle selbst scrollen, nie die Seite. display:block ist noetig, damit overflow an einem ueberhaupt wirkt. */ .legal-content table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Ab dieser Breite passt die Tabelle wieder und soll sich normal verhalten, damit die Spalten gleichmaessig ueber die volle Breite verteilt werden. */ @media (min-width:640px){ .legal-content table{ display:table; overflow-x:visible; } } .legal-content th, .legal-content td{ text-align:left; padding:10px 12px; border:1px solid var(--line); vertical-align:top; } .legal-content th{ background:var(--paper-2); color:var(--navy); font-weight:600; } .legal-toc{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:20px 24px; margin-bottom:36px; } .legal-toc p{ font-weight:700; color:var(--navy); margin-bottom:10px; font-size:14px; } .legal-toc ol{ margin-left:18px; font-size:14px; } .legal-toc a{ color:var(--navy); text-decoration:none; } .legal-toc a:hover{ color:var(--blue); text-decoration:underline; } .company-box{ background:var(--paper-2); border-radius:12px; padding:24px 28px; margin-bottom:32px; border:1px solid var(--line); } .company-box p{ margin-bottom:4px; color:var(--navy); font-size:15.5px; } .company-box .muted{ color:var(--text-2); font-size:14px; } /* ---------- Cookie banner ---------- */ #cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:100; background:var(--navy); color:#fff; padding:20px 28px; display:none; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:0 -8px 24px rgba(0,0,0,0.18); } #cookie-banner.show{ display:flex; } #cookie-banner p{ font-size:13.5px; color:#CBD8EC; max-width:640px; 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:8px; font-weight:600; font-size:13.5px; cursor:pointer; } .btn-cookie-decline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; } /* ---------- 404 page ---------- */ .error-page{ min-height:60vh; display:flex; align-items:center; } .error-code{ font-family:'Source Serif 4', serif; font-size:clamp(80px,14vw,160px); font-weight:700; color:var(--blue); line-height:0.9; margin-bottom:8px; } .error-page h1{ font-size:clamp(24px,3.4vw,32px); margin-bottom:14px; } .error-page p.lede{ color:var(--text-2); font-size:16px; max-width:480px; margin-bottom:32px; } .error-links{ display:flex; flex-direction:column; gap:10px; margin-bottom:36px; } .error-links a{ color:var(--blue); font-weight:600; text-decoration:none; font-size:15px; } .error-links a:hover{ text-decoration:underline; } /* ---------- Footer ---------- */ footer{ padding:56px 0 32px; border-top:1px solid var(--line); font-size:13px; color:var(--text-2); background:var(--paper-2); } .footer-inner{ display:block; } .footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-bottom:40px; } .footer-col{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; } .footer-h{ font-family:'Source Serif 4',serif; font-size:14px; font-weight:600; color:var(--navy); margin-bottom:4px; } .footer-col a{ color:var(--text-2); text-decoration:none; line-height:1.45; } .footer-col a:hover{ color:var(--blue); text-decoration:underline; } .footer-addr{ line-height:1.6; } .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:24px; border-top:1px solid var(--line); } .footer-links{ display:flex; gap:18px; flex-wrap:wrap; } .footer-links a{ color:var(--text-2); text-decoration:none; } /* Der Widerruf der Einwilligung ist ein