/* ============================================================
   Stylesheet der Steuerkanzlei Fuierer

   Farben stehen in site_config.py unter FARBEN; die :root-Variablen hier
   muessen dazu passen.

   Am 04.10.2026 von den ungenutzten Bausteinen der Vorlage befreit
   (Formular, Referenzkarten, Ablaufdiagramm, Kennzahlenleiste,
   Sprachumschalter, Tabellen) — 99 Regeln, gut ein Drittel der Datei. Wer
   einen dieser Bausteine braucht, holt ihn aus der Vorlage (new-project).

   Bewusst geblieben, obwohl derzeit nicht im HTML: .mobile-nav.open (setzt
   main.js) und Cookie-Banner samt Widerrufs-Knopf — beides erscheint, sobald
   GA_MESS_ID in site_config.py gesetzt wird.
   ============================================================ */

:root{
  /* Aus FARBEN in site_config.py; Akzent aus dem Logo der Altwebsite. */
  --navy:#1B2A3D;
  --blue:#3E5B80;
  --blue-d:#2F4867;
  --paper:#FFFFFF;
  --paper-2:#F4F6F9;
  --line:#E0E6EE;
  --text-2:#5A6576;
  --green:#2E9E5B;
  --header-h:76px;
}

*{ 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 <img> 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. Im Ausgangsprojekt traf das ein Banner
   mit 1100x634: in einem 320 px breiten Viewport blieb die Hoehe 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 <html lang="de">
   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,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; }

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);
}
/* Feste Hoehe statt Polster: das mobile Menue setzt mit top genau unter der
   Kopfzeile an. Mit Polster hing die Hoehe vom Inhalt ab — die Wortmarke ist
   hoeher als das Logo der Vorlage, das Menue begann deshalb 8 px zu frueh
   und sein erster Punkt klebte unter der Kopfzeile. */
.header-inner{
  max-width:1120px; margin:0 auto; padding:0 28px; height:var(--header-h);
  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; }

nav{ display:flex; align-items:center; gap:36px; }
.nav-links{ display:flex; gap:28px; }
/* Unterhalb dieser Breite uebernimmt das Burger-Menue. Wer die Navigation
   erweitert, prueft die Grenze neu: sobald Menue, Umschalter und CTA nicht
   mehr nebeneinander passen, schiebt der Header die Seite nach rechts. */
@media (max-width:1000px){ .nav-links{ display:none; } }
/* Sobald das Burger-Menue uebernimmt, entfaellt der CTA in der Kopfzeile:
   neben dem geoeffneten Menue stand "Kontakt aufnehmen" sonst dreimal auf
   dem Bildschirm, und unter 600 px passte er ohnehin nicht neben Logo und
   Burger. Im Menue stehen dafuer Telefon und E-Mail. */
@media (max-width:1000px){ 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{ 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:var(--blue-d); 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); }
/* top = Kopfzeile + deren 1 px Rahmen. */
.mobile-nav{ display:none; position:fixed; top:calc(var(--header-h) + 1px); left:0; right:0; bottom:0; background:#fff; z-index:49; padding:8px 28px 40px; overflow-y:auto; }
.mobile-nav.open{ display:block; }
html.menu-open{ overflow:hidden; }
.mobile-nav > a{ display:block; padding:18px 0; font-size:18px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--line); }
/* Die Knoepfe stehen in einem eigenen Block und nicht als .mobile-nav a:
   jene Regel faerbte den Text des Knopfes dunkel auf dunklem Grund. */
.mobile-nav-contact{ display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.mobile-nav-contact .btn{ justify-content:center; padding:15px 24px; font-size:16px; }

/* ---------- 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 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; }

/* ---------- 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; }

/* ---------- 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; }

/* ---------- 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; }

/* ---------- 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; } }

.contact-info-card{ background:var(--paper-2); border-radius:16px; padding:32px; border:1px solid var(--line); }
.contact-info-card h2{ 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; }

.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 <button>, weil er keine Seite
   aufruft. Optisch soll er sich aber nicht von den Footer-Links abheben. */
.footer-links .footer-linkbtn{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font:inherit; color:var(--text-2); text-decoration:none;
}
.footer-links .footer-linkbtn:hover{ color:var(--blue); text-decoration:underline; }
.footer-links a:hover{ color:var(--blue); text-decoration:underline; }
@media (max-width:860px){
  .footer-cols{ grid-template-columns:repeat(2,1fr); gap:28px; }
}
@media (max-width:520px){
  .footer-cols{ grid-template-columns:1fr; gap:24px; }
}

/* ---------- Accessibility: Skip-Link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
  font-size:14px; font-weight:600; text-decoration:none; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* <picture> muss sich wie das <img> darin verhalten (WebP-Fallback-Markup) */
picture{ display:block; }

/* ============================================================
   Steuerkanzlei Fuierer — One-Pager
   ============================================================ */

/* Anker-Spruenge landen sonst unter dem klebenden Header. */
section[id], .service-row[id]{ scroll-margin-top:84px; }

/* ---------- Wortmarke ----------
   Text statt Bilddatei: eine SVG-Datei im <img> kennt die Webfonts der
   Seite nicht und faellt auf eine Systemschrift zurueck. Die zwei Balken
   greifen die Formen aus dem alten Logo auf. */
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); }
.brand-mark{ display:flex; gap:4px; }
.brand-mark i{ display:block; height:14px; border-radius:4px; background:var(--blue); }
.brand-mark i:first-child{ width:26px; }
.brand-mark i:last-child{ width:10px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:'Source Serif 4', serif; font-weight:700; font-size:19px; letter-spacing:0.01em; }
.brand-sub{ font-size:12px; color:var(--text-2); letter-spacing:0.04em; }
@media (max-width:380px){ .brand-mark{ display:none; } }

/* ---------- Abschnitte ---------- */
.section-alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
section h2{ font-size:clamp(26px,3.4vw,38px); }
.section-lede{ color:var(--text-2); font-size:17px; max-width:720px; margin-top:16px; }

.check-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.check-list li{ position:relative; padding-left:24px; color:var(--navy); font-size:15px; }
.check-list li::before{
  content:""; position:absolute; left:2px; top:0.5em; width:10px; height:6px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ---------- Hero-Portraet ----------
   Das Foto hat 300x400 px. Groesser gezogen wuerde es unscharf — deshalb
   eine feste Hoechstbreite statt voller Spaltenbreite. */
.portrait{ max-width:300px; width:100%; margin:0 auto; }
.portrait img{ border-radius:16px; box-shadow:0 24px 60px rgba(27,42,61,0.18), 0 4px 14px rgba(27,42,61,0.10); }
.portrait figcaption{ margin-top:16px; font-size:14px; color:var(--text-2); text-align:center; }
.portrait figcaption strong{ color:var(--navy); font-size:15px; }
.hero-meta span{ white-space:nowrap; }
@media (max-width:520px){ .hero-meta span{ white-space:normal; } }

/* ---------- Leistungen ---------- */
.service-row{ grid-template-columns:44px 1fr 1.1fr; }
.service-row:hover{ background:var(--paper); }
@media (max-width:820px){ .service-row{ grid-template-columns:1fr; } }

/* ---------- Kanzlei ---------- */
.about-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:56px; align-items:start; }
.about-grid > *{ min-width:0; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.prose p{ font-size:16.5px; color:var(--text-2); margin-top:16px; max-width:680px; }
.prose h2{ margin-bottom:8px; }
.facts-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:28px 30px; }
.facts-card h3{ font-size:19px; margin-bottom:12px; }
.facts-card dl > div{ display:grid; grid-template-columns:92px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; }
.facts-card dl > div:first-child{ border-top:none; }
.facts-card dt{ color:var(--text-2); }
.facts-card dd{ color:var(--navy); font-weight:500; }

/* ---------- FAQ / Kontakt ---------- */
.faq-list details{ background:transparent; }
.contact-grid{ align-items:center; }
.contact-grid .hero-ctas{ margin-top:30px; margin-bottom:0; }
.contact-info-card h3{ font-size:19px; margin-bottom:18px; }
.contact-info-row span:last-child{ color:var(--navy); }

/* ---------- Rechtstexte ---------- */
.legal{ padding-top:56px; }
.legal-content h2{ scroll-margin-top:84px; }

/* ---------- Footer ---------- */
.footer-brand span:not(.footer-h){ line-height:1.6; }
/* "Betriebswirtschaftslehre" passt auf 320 px nicht in die schmale
   Spalte und schob die Seite um 16 px nach rechts. */
.facts-card dd{ min-width:0; hyphens:auto; overflow-wrap:break-word; }
@media (max-width:400px){ .facts-card{ padding:22px 20px; } .facts-card dl > div{ grid-template-columns:80px 1fr; } }
.footer-credit a{ color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line); }
.footer-credit a:hover{ color:var(--blue); border-bottom-color:var(--blue); }

/* ---------- Verweis auf die Schwestergesellschaft ----------
   Dunkel abgesetzt, damit er als eigener Hinweis gelesen wird und nicht als
   siebte Leistung. */
.sister{ background:var(--navy); padding:72px 0; }
.sister-inner{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.sister-inner > *{ min-width:0; }
@media (max-width:820px){ .sister-inner{ grid-template-columns:1fr; gap:28px; } }
.sister .eyebrow{ color:#A9BDD6; }
.sister h2{ color:#fff; font-size:clamp(24px,3vw,32px); }
.sister p{ color:#C9D5E4; font-size:16.5px; max-width:680px; margin-top:14px; }
.btn-light{ background:#fff; color:var(--navy); white-space:nowrap; justify-self:start; }
.btn-light:hover{ background:var(--paper-2); transform:translateY(-1px); }
.prose a{ color:var(--blue); }
/* hyphens:auto ist fuer 320 px gedacht. In der breiten Hero-Spalte trennte
   der Browser damit "Muen-chen" und "Privatperso-nen", obwohl die Woerter
   einfach in die naechste Zeile gepasst haetten. Ab hier nur noch an
   Wortgrenzen umbrechen. */
@media (min-width:520px){ .hero h1{ hyphens:manual; } }