/* * 3ventIT Theme – Haupt-Stylesheet * Design 1:1 nach Vorlage v4: warm-dunkles Anthrazit, Orange (#f0701f) führend, * Blau (#3a9bef) als minimaler Zweitakzent, System-Schriften (kein Font-CDN). */ /* ---------- Design-Token ---------- */ :root { --bg: #15171b; --sec: #1b1e23; --card: #23272f; --line: #31353d; --ink: #eceef1; --grey: #a2a7af; --blue: #3a9bef; --orange: #f0701f; --orange-dark: #d65f14; --orange-soft: rgba(240, 112, 31, 0.15); /* WCAG AA auf gefüllten Buttons mit WEISSER Schrift. Weiß auf --orange (#f0701f) erreicht nur 2,98:1 und verfehlt die AA-Schwelle von 4,5:1 (Normaltext). Da Schriftfarbe (weiß) und Schriftgröße (14px) gesetzt sind, bleibt nur die Fläche als Stellhebel. --orange-btn ist voll gesättigt (Blau-Anteil 0), damit der Ton beim Abdunkeln leuchtend statt bräunlich bleibt; Farbton 21,8° liegt praktisch auf dem Marken-Orange (23,3°). #fff auf --orange-btn = 4,62:1 ✓ AA #fff auf --orange-btn-hover = 5,72:1 ✓ AA NUR für gefüllte Button-Flächen (.p-orange, .cc-btn-primary, .skip-link). Akzente, Links, Icons, Rahmen und Gradienten behalten --orange / --orange-dark. */ --orange-btn: #cc4a00; --orange-btn-hover: #b34100; /* Glas-Sprache (nach Vorbild frontend_live) */ --glass-line: rgba(255, 255, 255, 0.08); --glass-line-strong: rgba(255, 255, 255, 0.14); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Der Header ist sticky (66px). Ohne scroll-padding rutscht der Anfang jedes Ankerziels darunter — der Sprung ginge optisch zu weit nach unten. Am gesetzt, damit es fuer jedes kuenftige Ankerziel gilt, nicht nur die heutigen. */ html { scroll-padding-top: 82px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(240, 112, 31, 0.35); color: #fff; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } /* WCAG 1.4.11: Der Daumen ersetzt die UA-Scrollbar und ist selbst ein Bedienelement — 0.14 ergab nur 1,52:1 auf --bg. 0.35 → 3,23:1. */ ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; } .label { font-size: 11px; letter-spacing: 2.5px; font-weight: 700; color: var(--orange); text-transform: uppercase; } .accent-bar { width: 64px; height: 3px; background: linear-gradient(90deg, var(--orange-dark), var(--orange)); border-radius: 3px; margin: 22px auto 0; box-shadow: 0 0 16px rgba(240, 112, 31, 0.45); } .icon { flex: none; vertical-align: middle; } /* ---------- Barrierefreiheit ---------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--orange-btn); color: #fff; /* 4,62:1 — s. Token-Block. */ font-size: 14px; font-weight: 600; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; outline: none; } /* #content traegt tabindex="-1" und wird nur programmatisch fokussiert (Skip-Link, Fokus-Fallback aus consent.js) — daher kein Fokusring um den ganzen Hauptinhalt. Der :focus-visible-Ring an echten Bedienelementen bleibt davon unberuehrt. */ #content:focus { outline: none; } /* ---------- Buttons (Pills) ---------- Maße exakt wie in der Design-Vorlage v4: 14px/600, Padding 12/24. Die AA-Konformität kommt über die Flächenfarbe (--orange-btn), nicht über Schriftgröße oder -farbe — die Schrift bleibt weiß. Siehe Token-Block. */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); font-family: inherit; } .pill .icon { transition: transform 0.25s var(--ease); } .pill:hover .icon { transform: translateX(3px); } .p-orange { /* Weiße Schrift => --orange-btn als Fläche: 4,62:1 (AA). S. Token-Block. */ background: var(--orange-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 16px -6px rgba(240, 112, 31, 0.55); } .p-orange:hover { background: var(--orange-btn-hover); /* 5,72:1 mit Weiß. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 26px -8px rgba(240, 112, 31, 0.65); transform: translateY(-1px); } .p-orange:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 10px -6px rgba(240, 112, 31, 0.5); } /* WCAG 1.4.11: Der Rahmen ist das einzige Merkmal, das den Ghost-Button als Button erkennbar macht — 0.5 ergab nur 2,33:1 auf dem Hero. 0.8 → 3,91:1. */ .p-ghost { border-color: rgba(240, 112, 31, 0.8); color: #fff; background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .p-ghost:hover { background: var(--orange-soft); border-color: var(--orange); } .p-ghost:active { background: rgba(240, 112, 31, 0.22); } .p-out { border-color: var(--orange); color: var(--orange); font-size: 13px; padding: 9px 18px; } .p-out:hover { background: var(--orange-soft); box-shadow: 0 4px 16px -8px rgba(240, 112, 31, 0.5); } /* Nav-CTA: nur kompaktere Polsterung. Die Schriftgröße ist hier kein Stellhebel — der Kontrast kommt allein aus der Fläche (--orange-btn, 4,62:1 mit Weiß). Marken-Orange --orange als Fläche wäre 2,98:1 und verfehlt AA in JEDER Schriftgröße (auch die 3,0:1-Schwelle für großen Text). */ .nav-cta { padding: 7px 18px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%), rgba(21, 23, 27, 0.82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--glass-line); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6); } /* min-height statt height: Bei reinem Text-Zoom (200 %) ragte der Nav-CTA sonst aus dem Band. Durch align-items:center bleibt die Optik im Normalzustand unveraendert — die Hoehe kann jetzt nur noch wachsen, nie schrumpfen. */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; } .brand { line-height: 1.15; } .brand a { display: inline-block; } .brand-logo { display: block; } .brand-logo img { display: block; height: 20px; width: auto; } .brand .brand-name { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -0.5px; display: block; } .brand .brand-name .brand-it { color: var(--orange); font-style: normal; } /* Lesbarkeit (WCAG): mindestens 11px — 9px/7,5px waren unter jeder Lesbarkeits- grenze. Ab Tablet steht die Subline einzeilig (siehe .site-footer unten); nur einspaltig auf dem Telefon darf sie umbrechen, dort wird zusätzlich das Tracking reduziert (Media-Query unten). */ .brand .brand-sub { display: block; font-size: 11px; letter-spacing: 1.2px; color: #fff; margin-top: 10px; text-transform: uppercase; } .custom-logo { display: block; max-height: 44px; width: auto; } .main-navigation ul { display: flex; gap: 30px; list-style: none; font-size: 14px; color: #c3c7cd; } .main-navigation a { position: relative; display: inline-block; padding: 4px 0; color: #c3c7cd; transition: color 0.25s var(--ease); } .main-navigation a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s var(--ease); } .main-navigation a:hover, .main-navigation a.is-active, .main-navigation .current-menu-item > a { color: #fff; } .main-navigation a:hover::after, .main-navigation a.is-active::after, .main-navigation .current-menu-item > a::after { transform: scaleX(1); } .nav-toggle { display: none; background: rgba(255, 255, 255, 0.03); border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); padding: 8px 10px; cursor: pointer; line-height: 0; transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease); } .nav-toggle:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-soft); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(130% 130% at 72% -10%, #2a2018 0%, var(--bg) 60%); padding: 112px 0 100px; text-align: center; } /* Zusätzliche, sehr dezente Glow-Layer über dem warmen Grundverlauf */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 340px at 50% -80px, rgba(240, 112, 31, 0.11) 0%, rgba(240, 112, 31, 0) 70%), radial-gradient(900px 300px at 50% 108%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 70%); } .hero .wrap { position: relative; } .hero-logo { display: flex; justify-content: center; } .hero-logo svg { width: 100%; max-width: 230px; height: auto; } .hero-logo .logo-it { fill: var(--orange); } .hero .sub { font-size: 12px; letter-spacing: 3px; color: #fff; margin-top: 10px; text-transform: uppercase; } .hero h1 { font-size: 30px; font-weight: 400; color: #dfe2e6; margin: 36px auto 0; max-width: 720px; line-height: 1.4; } .hero h1 .serif { color: var(--orange); } .hero .hero-text { color: var(--grey); font-size: 16px; line-height: 1.7; margin: 24px auto 36px; max-width: 520px; } .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Stats-Streifen ---------- */ .strip { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%), var(--sec); border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); } .strip ul { display: flex; flex-wrap: wrap; gap: 14px; padding: 22px 24px; justify-content: space-between; list-style: none; max-width: 1080px; margin: 0 auto; } .strip li { flex: 1; min-width: 150px; color: #c3c7cd; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; } .strip .icon { color: var(--orange); filter: drop-shadow(0 0 6px rgba(240, 112, 31, 0.35)); } @media (min-width: 821px) { .strip li + li { border-left: 1px solid rgba(255, 255, 255, 0.06); padding-left: 14px; } } /* ---------- Sektionen ---------- */ .section { padding: 80px 0; } .alt { background: var(--sec); } .shead { text-align: center; margin-bottom: 46px; } .shead h2, .about-intro h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.5px; margin-top: 8px; color: #fff; } h2 .accent, h3 .accent { font-style: normal; color: var(--orange); } .shead h2 .num3 { height: 0.9em; width: auto; display: inline-block; vertical-align: baseline; margin: 0 0 -0.08em 0; } /* Wortmarke in Überschriften (threeventit_brand_mark) — ersetzt den Schriftzug „3ventIT“ dort, wo er als Marke steht. 0.75em, weil das Logo-Artwork die viewBox fast voll ausfüllt (die „3“ reicht von oben bis zur Grundlinie): So trifft die Marke die Versalhöhe des umgebenden Textes statt ihn zu überragen. Skaliert damit automatisch mit jeder Überschriftengröße mit (24–36px). */ .brand-inline { height: 0.75em; width: auto; display: inline-block; vertical-align: baseline; margin-bottom: -0.02em; } .shead p { color: var(--grey); font-size: 16px; margin-top: 10px; } /* ---------- Leistungs-Karten (Glassmorphism) ---------- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { position: relative; /* Transluzentes Glas über dem Anthrazit-Grund: heller Sheen oben + dunkle Basis */ background: radial-gradient(120% 60% at 50% 0%, rgba(240, 112, 31, 0.1) 0%, rgba(240, 112, 31, 0) 60%), linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 50%, rgba(255, 255, 255, 0.03) 100%), rgba(30, 33, 40, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(240, 112, 31, 0.28); border-radius: 20px; padding: 30px 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.22), 0 16px 40px rgba(0, 0, 0, 0.28); transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); display: flex; flex-direction: column; } .card:hover { transform: translateY(-6px); border-color: rgba(240, 112, 31, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.3), 0 26px 60px rgba(0, 0, 0, 0.38), 0 0 46px -12px rgba(240, 112, 31, 0.45); } .card .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--orange-soft); border: 1px solid rgba(240, 112, 31, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px -8px rgba(240, 112, 31, 0.5); color: var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); } .card:hover .ico { background: rgba(240, 112, 31, 0.22); border-color: rgba(240, 112, 31, 0.55); } .card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #fff; } /* Einheitliche Mindesthöhe der Kategorie-Beschreibung, damit die Tile-Liste in allen drei Karten auf gleicher Höhe beginnt (unabhängig von der Textlänge). */ .card > p { font-size: 14px; color: var(--grey); line-height: 1.6; min-height: 4.8em; } /* Einzelleistungen als dezente Glas-Tiles. Die Liste füllt den verfügbaren Kartenraum (flex: 1), jedes Tile erhält den gleichen Anteil (flex: 1 1 0) — so sind 3er- und 4er-Karten exakt gleich hoch und gleichmäßig gefüllt, die "Mehr zu …"-Links schließen auf einer Höhe ab. */ .card ul { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .card li { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; font-size: 13px; color: #d6d9dd; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 10px 14px; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); } .card li:hover { background: rgba(240, 112, 31, 0.12); border-color: rgba(240, 112, 31, 0.4); } .card li strong { display: block; color: #fff; font-weight: 600; } .card li .desc { display: block; color: var(--grey); margin-top: 2px; line-height: 1.5; } .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--orange); font-size: 14px; font-weight: 600; transition: color 0.25s var(--ease); } .card-link:hover { color: #ff8a3c; } .card-link .icon { transition: transform 0.25s var(--ease); } .card-link:hover .icon { transform: translateX(4px); } /* ---------- Über uns (Intro + Säulen) ---------- */ .about-intro { max-width: 860px; margin: 0 auto 52px; text-align: center; } .about-intro .label { margin-bottom: 8px; } .about-intro h2 { margin-bottom: 22px; } .about-lead { color: #d6d9dd; font-size: 16px; line-height: 1.7; max-width: 760px; margin: 0 auto; } .about-lead strong { color: #fff; font-weight: 700; } .about-outro { color: #d6d9dd; font-size: 16px; line-height: 1.7; max-width: 760px; margin: 0 auto; } /* Die drei Bereiche als anklickbare Säulen */ .pillars { display: flex; flex-direction: column; gap: 20px; max-width: 680px; margin: 32px auto 30px; text-align: left; } .pillar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-left: 20px; border-left: 2px solid var(--line); transition: border-color 0.25s var(--ease); } .pillar:hover { border-left-color: var(--orange); } .pillar h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 5px; transition: color 0.25s var(--ease); } .pillar p { font-size: 14px; color: var(--grey); line-height: 1.6; } .pillar .icon { flex: none; color: rgba(255, 255, 255, 0.4); margin-top: 2px; transition: color 0.25s var(--ease), transform 0.25s var(--ease); } .pillar:hover h3 { color: var(--orange); } .pillar:hover .icon { color: var(--orange); transform: translateX(4px); } /* ---------- Stärken-Karten (ohne eigene Überschrift, siehe section-why.php) ---------- */ /* Der Abstand zu den Karten kommt aus .about-intro (margin-bottom: 52px). */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 960px; margin: 0 auto; } /* Oberflaeche identisch zu .ref-card (Referenzen): Orange-Schimmer oben, Glas-Blur, neutraler Rahmen — die Orange-Kante bleibt dem Hover vorbehalten. Nur das Layout bleibt eigen (Icon-Zeile statt Spalte). */ .why-item { background: radial-gradient(120% 60% at 50% 0%, rgba(240, 112, 31, 0.08) 0%, rgba(240, 112, 31, 0) 60%), linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 50%, rgba(255, 255, 255, 0.03) 100%), rgba(30, 33, 40, 0.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border: 1px solid var(--glass-line-strong); border-radius: 18px; padding: 26px 24px; display: flex; gap: 14px; align-items: flex-start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.24); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .why-item:hover { transform: translateY(-4px); border-color: rgba(240, 112, 31, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 36px -14px rgba(240, 112, 31, 0.4); } .why-item .icon { box-sizing: content-box; flex: none; color: var(--orange); background: var(--orange-soft); border: 1px solid rgba(240, 112, 31, 0.35); border-radius: 10px; padding: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); } .why-item:hover .icon { background: rgba(240, 112, 31, 0.22); border-color: rgba(240, 112, 31, 0.55); } .why-item b { font-size: 15px; font-weight: 600; display: block; color: #fff; margin-bottom: 3px; } .why-item span { font-size: 13px; color: var(--grey); line-height: 1.55; } /* ---------- Kontakt-Band ---------- */ .band { position: relative; overflow: hidden; text-align: center; padding: 82px 0; background: radial-gradient(120% 150% at 50% 0%, #3a2413 0%, var(--bg) 68%); border-top: 1px solid var(--glass-line); } /* Orangefarbene Hairline + Glow als Auftakt des Bandes */ .band::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 80%); height: 1px; background: linear-gradient(90deg, rgba(240, 112, 31, 0) 0%, rgba(240, 112, 31, 0.65) 50%, rgba(240, 112, 31, 0) 100%); } .band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(480px 220px at 50% -40px, rgba(240, 112, 31, 0.12) 0%, rgba(240, 112, 31, 0) 70%); } .band .wrap { position: relative; z-index: 1; } .band h2 { font-size: 32px; font-weight: 700; color: #fff; margin-top: 8px; letter-spacing: -0.5px; } .band p { margin: 12px 0 30px; color: var(--grey); } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(180deg, #101216 0%, #0c0e11 100%); color: var(--grey); padding: 62px 0 32px; border-top: 3px solid var(--orange); font-size: 13px; } /* Brand-Spalte traegt die einzeilige Subline, Stammdaten-Spalte „HRA 8868 P · Amtsgericht Potsdam" — beide brauchen mehr Breite als die reinen Link-Spalten. */ .fgrid { display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1fr; gap: 36px; } /* Die Subline unter dem Logo darf nicht umbrechen. nowrap macht ihre volle Breite zur Mindestbreite (min-content) der Brand-Spalte — da `2.2fr` ein Auto-Minimum hat, zieht sich die Spalte selbst auf die noetige Breite, ohne dass hier ein Pixelwert geraten werden muss; die Link-Spalten teilen den Rest im gewohnten Verhaeltnis. */ @media (min-width: 821px) { .site-footer .brand .brand-sub { white-space: nowrap; } } /* Zwischen 821px und 1080px ist das 4-Spalten-Raster zu schmal, um die einzeilige Subline und die Link-Spalten nebeneinander zu tragen: dort bekommt die Brand-Spalte eine eigene volle Zeile, die drei Link-Spalten ruecken darunter. */ @media (min-width: 821px) and (max-width: 1079px) { .fgrid { grid-template-columns: 1.4fr 1fr 1fr; } .fgrid > div:first-child { grid-column: 1 / -1; } } .site-footer .brand { margin-bottom: 14px; } .site-footer .brand .brand-name { font-size: 22px; } .site-footer .fgrid > div > p { line-height: 1.7; max-width: 340px; } .site-footer h2.fhead { color: #fff; font-size: 12px; margin-bottom: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; } /* Firmenname als Footer-Überschrift: Eigenschreibweise „3ventIT e.K." bewahren. 14px gemischt gesetzt wirkt optisch so groß wie 12px Versalien der Nachbarspalten. */ .site-footer h2.fhead-brand { font-size: 14px; text-transform: none; letter-spacing: normal; } /* Footer-Linkgruppen sind