/* schurwood.css — Gestaltung von schurwood.com | v1.2.0 | 2026-10-11
   Farben aus dem Logo 4b+ (LIESMICH im Logo-Ordner), Schriften selbst gehostet. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/schriften/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/schriften/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("/schriften/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: normal; font-display: swap; src: url("/schriften/source-sans-3.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-style: italic; font-display: swap; src: url("/schriften/source-sans-3-italic.woff2") format("woff2"); }

:root {
  --waldgruen: #0E633C;
  --tiefgruen: #0B5131;
  --sonnengelb: #FDDF19;
  --hell: #F5F5F4;
  --weiss: #FFFFFF;
  --text: #1B1F1C;
  --text-leise: #3A403B;
  --text-klein: #5A615B;
  --linie: #E2E1DC;
  --feld: #B9B8B0;
  --auf-dunkel: #DCE8E0;
  --titel: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fliess: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breite: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hell); color: var(--text); font-family: var(--fliess); font-size: 18px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--waldgruen); }
a:hover { color: var(--tiefgruen); }
:focus-visible { outline: 3px solid var(--sonnengelb); outline-offset: 2px; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.weiss { background: var(--weiss); }
.linien { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Titel-Schrift */
.ueberzeile, .titel, h1, h2, h3, .knopf, .hauptmenue, .karte-titel {
  font-family: var(--titel);
}
.ueberzeile { font-weight: 700; font-size: 17px; letter-spacing: 0.12em; color: var(--waldgruen); text-transform: uppercase; }
h1, h2, h3 { line-height: 1.02; letter-spacing: 0.02em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(42px, 6vw, 76px); margin: 12px 0 20px; line-height: 0.98; letter-spacing: 0.01em; }
h2 { font-weight: 800; font-size: clamp(34px, 4.2vw, 48px); margin: 0 0 16px; }
h3 { font-weight: 800; font-size: 30px; margin: 4px 0 14px; }
.leise { color: var(--text-leise); }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 12px; padding-bottom: 12px; }
.kopf-logo img { width: 242px; height: auto; }
.hauptmenue { display: flex; flex-wrap: wrap; gap: 0 26px; font-weight: 700; font-size: 18px; letter-spacing: 0.06em; }
.hauptmenue a { color: var(--text); text-decoration: none; padding: 10px 0; border-bottom: 3px solid transparent; }
.hauptmenue a:hover { color: var(--waldgruen); }
.hauptmenue a[aria-current="page"] { border-bottom-color: var(--sonnengelb); }
.hauptmenue a.betont { color: var(--waldgruen); }

/* Knöpfe */
.knopf { display: inline-block; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-decoration: none; padding: 14px 28px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.knopf-gelb { background: var(--sonnengelb); color: var(--text); }
.knopf-gelb:hover { background: #F2D100; color: var(--text); }
.knopf-rand { border-color: var(--text); color: var(--text); background: transparent; }
.knopf-rand:hover { background: var(--text); color: var(--weiss); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }

/* Abschnitte */
.abschnitt { padding-top: 72px; padding-bottom: 80px; }
.zweispaltig { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.zweispaltig > * { flex: 1 1 420px; min-width: 0; }
.foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

.held .rahmen { padding-top: 56px; padding-bottom: 72px; }
.held-text { font-size: 21px; max-width: 34em; color: var(--text-leise); margin: 0 0 32px; }

.band { background: var(--waldgruen); color: var(--hell); }
.band .rahmen { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; padding-top: 56px; padding-bottom: 56px; }
.band h2 { flex: 0 1 300px; margin: 0; font-size: 44px; line-height: 1; }
.band-text { flex: 1 1 480px; min-width: 0; font-size: 20px; }
.band-text p { margin: 0 0 14px; }
.band-schluss { font-family: var(--titel); font-weight: 700; font-size: 28px; letter-spacing: 0.04em; color: var(--sonnengelb); margin: 0 !important; }

.karten { display: flex; flex-wrap: wrap; gap: 32px; }
.karte { flex: 1 1 460px; min-width: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.karte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.karte-inhalt { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.karte ul { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
.karte .weiter { margin-top: 20px; font-weight: 600; }

.schritte { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
.schritt { flex: 1 1 280px; min-width: 0; }
.schritt-nr { font-family: var(--titel); font-weight: 800; font-size: 56px; line-height: 1; color: var(--waldgruen); }
.schritt h3 { font-size: 26px; font-weight: 700; letter-spacing: 0.03em; margin: 8px 0; }
.schritt p { margin: 0; color: var(--text-leise); }

/* Beitragskacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.kachel { display: block; text-decoration: none; color: var(--text); background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.kachel:hover { color: var(--text); border-color: var(--waldgruen); }
.kachel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kachel-text { padding: 16px 18px 20px; }
.kachel-datum { font-size: 15px; color: var(--text-klein); }
.karte-titel { font-weight: 700; font-size: 22px; line-height: 1.15; margin-top: 4px; letter-spacing: 0.02em; }
.kachel-auszug { font-size: 16px; color: var(--text-leise); margin: 8px 0 0; }

.gruss { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; }
.gruss-kopf { flex: 0 1 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gruss h2 { font-size: 40px; line-height: 1; margin: 0; }
.portrait { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
.gruss > div { flex: 1 1 480px; min-width: 0; }
.gruss p { margin: 0 0 14px; }

/* Seitenkopf auf Unterseiten */
.seitenkopf { background: var(--tiefgruen); color: var(--hell); }
.seitenkopf .rahmen { padding-top: 56px; padding-bottom: 60px; }
.seitenkopf .ueberzeile { color: var(--sonnengelb); }
.seitenkopf h1 { font-size: clamp(40px, 5.5vw, 68px); margin: 10px 0 16px; }
.seitenkopf p { margin: 0; max-width: 36em; font-size: 20px; color: var(--auf-dunkel); }

/* Angebote */
.angebote { display: flex; flex-wrap: wrap; gap: 24px; }
.angebot { flex: 1 1 300px; min-width: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.angebot.empfohlen { border: 3px solid var(--sonnengelb); }
.angebot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.angebot-inhalt { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.angebot h2 { font-size: 30px; margin: 0; }
.angebot p { margin: 0; color: var(--text-leise); flex: 1; }
.preis { font-family: var(--titel); font-weight: 800; font-size: 32px; }
.preis-hinweis { font-family: var(--fliess); font-weight: 600; font-size: 16px; color: var(--waldgruen); margin-left: 6px; white-space: nowrap; }

/* Formular */
.anfrage-bereich { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.formular { flex: 1 1 520px; min-width: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.formular h2 { font-size: 36px; margin: 0 0 4px; }
.feldzeile { display: flex; flex-wrap: wrap; gap: 18px; }
.feld { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.feld input, .feld select, .feld textarea { font: inherit; font-weight: 400; padding: 12px 14px; border: 1px solid var(--feld); border-radius: 4px; background: var(--weiss); color: var(--text); width: 100%; }
.feld textarea { resize: vertical; min-height: 140px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--sonnengelb); outline-offset: 0; border-color: var(--waldgruen); }
.pflicht { color: var(--text-klein); font-weight: 400; }
.formular .knopf { align-self: flex-start; }
.hinweis-klein { font-size: 15px; color: var(--text-klein); margin: 0; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 16px 18px; border-radius: 4px; background: #FDF6C4; border: 1px solid #E8CF3A; margin: 0; }

.fragen { flex: 1 1 400px; min-width: 0; }
.fragen h2 { font-size: 36px; margin: 0 0 20px; }
.fragen h3 { font-family: var(--fliess); font-size: 19px; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0 0 4px; }
.fragen p { margin: 0 0 22px; color: var(--text-leise); }

/* Versand, Zahlung, Hersteller und Sicherheit unter der Anfrage */
.kleingedrucktes { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-top: 8px; padding-bottom: 72px; font-size: 17px; color: var(--text-leise); }
.kleingedrucktes > div { flex: 1 1 380px; min-width: 0; border-top: 1px solid var(--linie); padding-top: 24px; }
.kleingedrucktes h2 { font-size: 28px; margin: 0 0 12px; color: var(--text); }
.kleingedrucktes p { margin: 0 0 14px; }
.kleingedrucktes ul { margin: 0 0 14px; padding-left: 20px; }
.kleingedrucktes li { margin-bottom: 6px; }

/* Beitrag und Textseiten */
.text { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; }
.text h1 { font-size: clamp(36px, 5vw, 56px); margin: 8px 0 12px; }
.text h2 { font-size: 30px; margin: 44px 0 12px; }
.text h3 { font-size: 24px; margin: 32px 0 8px; }
.text p, .text ul, .text ol { margin: 0 0 18px; }
.text li { margin-bottom: 6px; }
.text figure { margin: 28px 0; }
.text figure img { width: 100%; border-radius: 6px; }
.text figcaption { font-size: 15px; color: var(--text-klein); margin-top: 8px; }
.text .rechts { text-align: right; }
.muster-kasten { background: var(--weiss); border: 2px solid var(--text); padding: 4px 28px 20px; margin: 44px 0 0; }
.muster-kasten h2 { margin-top: 20px; }
.muster-formular { list-style: none; padding: 0; }
.muster-formular li { margin: 0; padding: 14px 0 34px; border-bottom: 1px solid var(--feld); }
.muster-formular li:first-child { padding-bottom: 14px; border-bottom: 0; font-weight: 600; }
.muster-formular li:nth-child(2) { padding-bottom: 72px; }
@media print { .kopf, .fuss { display: none; } .muster-kasten { break-inside: avoid; } }
.text .mitte { text-align: center; }
.datumzeile { font-size: 16px; color: var(--text-klein); margin: 0 0 28px !important; }
.titelbild { margin: 0 0 32px !important; }
.kasten { background: var(--weiss); border: 1px solid var(--linie); border-left: 0; border-top: 4px solid var(--sonnengelb); border-radius: 6px; padding: 24px 28px; margin: 40px 0 0; }
.kasten h2 { margin: 0 0 8px; font-size: 28px; }
.kasten p { margin: 0 0 16px; }
.blaettern { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); }
.blaettern a { text-decoration: none; max-width: 22em; }
.blaettern span { display: block; font-size: 15px; color: var(--text-klein); }
.blaettern strong { font-family: var(--titel); font-size: 20px; letter-spacing: 0.02em; font-weight: 700; }
.blaettern .naechster { text-align: right; margin-left: auto; }

/* Fuß */
.fuss { background: var(--tiefgruen); color: var(--auf-dunkel); font-size: 16px; }
.fuss .rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 32px; padding-top: 32px; padding-bottom: 32px; }
.fuss-marke { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* Text im Fuß steht auf der Grundlinie des Schriftzugs; die liegt 1,4 px über der Unterkante der Logodatei */
.fuss-marke img { width: 208px; height: auto; margin-bottom: -1.4px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss a { color: var(--auf-dunkel); }
.fuss a:hover { color: var(--weiss); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .kopf-logo img { width: 190px; }
  .hauptmenue { gap: 0 18px; font-size: 16px; }
  .abschnitt { padding-top: 56px; padding-bottom: 56px; }
  .band h2 { font-size: 36px; }
  .formular { padding: 22px; }
}