/* Reset + Grundlayout + Typografie */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-base); font-size: var(--fs-body); line-height: 1.7; letter-spacing: 0; color: var(--color-text); background: var(--color-surface); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Kanonische Typo-Specs: jede Variante seitenweit identisch (Groesse / Zeilenabstand / Zeichenabstand) */ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-heading); margin: 0 0 0.5em; font-weight: 700; } h1 { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; } h4 { font-size: var(--fs-h4); line-height: 1.35; letter-spacing: 0; } p { margin: 0 0 1em; font-size: var(--fs-body); line-height: 1.7; letter-spacing: 0; } p:last-child { margin-bottom: 0; } /* Silbentrennung: automatische, korrekte deutsche Worttrennung. lang="de-AT" am liefert die Trennmuster (El-len-bo-gen), daher bricht der Browser z.B. "Ellen-bogen", nie "Ellenbog-en". Vorhandene ­ im Markup bleiben bevorzugte Trennstellen. */ body { hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* nur Woerter ab 7 Zeichen trennen; min. 3 Zeichen vor UND nach der Trennung -> keine haesslichen Mini-Reste wie "...-en". */ hyphenate-limit-chars: 7 3 3; } /* UI-Labels (Navigation, Buttons, Eyebrows) nie automatisch trennen, nur an gesetzten ­. */ .nav, .btn, .eyebrow { hyphens: manual; -webkit-hyphens: manual; } /* Layout-Bausteine (Divi: section / row / column) */ .section { padding: var(--section-pad) 0; } .section--sm { padding: var(--section-pad-sm) 0; } .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: 24px; } .row { display: flex; flex-wrap: wrap; gap: var(--gap); } .row > .col { flex: 1 1 0; min-width: 0; } /* Font Awesome Glyph-Helper (Icons aus Divi-Unicodes) */ .fa-icon { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; } /* Responsive */ @media (max-width: 1023px) { :root { --section-pad: 70px; --section-pad-sm: 55px; } } @media (max-width: 767px) { /* Einheitliches vertikales Section-Padding auf der ganzen Seite (Referenzhoehe: Sektion "Ueber mich"). */ :root { --section-pad: 55px; --section-pad-sm: 55px; } .row { flex-direction: column; } }