/*
===============================================================================
GUFA.DE – ZENTRALES STYLESHEET
===============================================================================

Dieses Stylesheet steuert das vollständige Erscheinungsbild der Website:
Farben, Schriftgrößen, Abstände, Navigation, Inhaltskarten, Tabellen,
Zitate, Fußzeile, responsive Darstellung und Druckausgabe.

Wichtige Einheiten:
- rem: relativ zur Grundschriftgröße des Browsers
- ch: ungefähre Zeichenbreite, geeignet für lesbare Textzeilen
- vw: Prozentanteil der Fensterbreite
- clamp(MIN, FLEXIBEL, MAX): flexible Größe innerhalb fester Grenzen

Grundsatz:
Zentrale Farben, Breiten, Rundungen und Schatten möglichst zuerst im Bereich
:root ändern. Dadurch wirken Anpassungen einheitlich auf die gesamte Website.
===============================================================================
*/

/*
===============================================================================
1. ZENTRALE DESIGN-VARIABLEN
===============================================================================
Diese Variablen werden im gesamten Stylesheet mit var(--name) verwendet.
Änderungen an dieser Stelle wirken zentral auf alle zugehörigen Elemente.
===============================================================================
*/
:root {
  /* Hauptakzent: Linien, aktive Menüpunkte und Hervorhebungen. */
  --accent: #cf231c;
  /* Dunklere Akzentfarbe, hauptsächlich für Hover-Zustände. */
  --accent-dark: #a51b16;
  /* Standardfarbe für normalen Text. */
  --ink: #202124;
  /* Gedämpfte Farbe für Zusatzinformationen. */
  --muted: #5e6369;
  /* Standardfarbe für Rahmen und Trennlinien. */
  --line: #d7d9dc;
  /* Weißer Hintergrund für Kopfbereich und Inhaltsflächen. */
  --surface: #ffffff;
  /* Heller grauer Hintergrund außerhalb der Inhaltskarte. */
  --surface-soft: #f3f4f5;
  /* Leicht warmer Hintergrund für Informationsfelder. */
  --surface-warm: #faf7f3;
  /* Farbe der sichtbaren Tastatur-Fokusmarkierung. */
  --focus: #0b57d0;
  /* Maximale Breite der zentralen Seitenbereiche. */
  --max-width: 1120px;
  /* Einheitliche Abrundung für Karten und Hinweisfelder. */
  --radius: 8px;
  /* Dezenter Schatten der zentralen Inhaltskarte. */
  --shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
}

*,
*::before,
*::after {

  box-sizing: border-box;
}

/*
===============================================================================
2. GLOBALE GRUNDEINSTELLUNGEN
===============================================================================
box-sizing: border-box sorgt dafür, dass Breiten einschließlich Innenabstand
und Rahmen berechnet werden. Das vereinfacht das Layout deutlich.
===============================================================================
*/

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

/*
Grundlayout der gesamten Seite:
- keine Standard-Außenränder
- mindestens 280 Pixel Breite
- systemeigene Schriftarten ohne externe Schriftdateien
- 1.0625rem entsprechen bei 16 Pixel Grundgröße ungefähr 17 Pixeln
*/
body {
  margin: 0;
  min-width: 280px;
  color: var(--ink);
  background: var(--surface-soft);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

/*
Bilder werden nie breiter als ihr verfügbarer Bereich und behalten dabei
automatisch ihr ursprüngliches Seitenverhältnis.
*/
img {
  max-width: 100%;
  height: auto;
}

/*
===============================================================================
3. LINKS UND TASTATURFOKUS
===============================================================================
Links erhalten eine klar erkennbare Farbe und Unterstreichung.
===============================================================================
*/
a {
  color: #0755a5;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--accent-dark);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/*
===============================================================================
4. SPRUNGLINK FÜR TASTATURBEDIENUNG
===============================================================================
Der Link „Direkt zum Inhalt“ liegt normalerweise außerhalb des sichtbaren
Bereichs. Sobald er per Tabulatortaste fokussiert wird, erscheint er oben links.
===============================================================================
*/
.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.65rem 0.9rem;
  color: #fff;
  background: #000;
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
  top: 0;
}

/*
===============================================================================
5. SEITENKOPF UND LOGO
===============================================================================
Der Seitenkopf besteht aus weißem Hintergrund, roter oberer Kennlinie und
einer dezenten unteren Trennlinie.
===============================================================================
*/
.site-header {
  background: var(--surface);
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--line);
}

/*
Alle zentralen Innenbereiche verwenden dieselbe maximale Breite und werden
horizontal zentriert. calc(100% - 2rem) erzeugt seitliche Abstände,
--max-width begrenzt die Gesamtbreite auf großen Bildschirmen.
*/
.header-inner,
.nav-inner,
.main-inner,
.footer-inner {
  width: min(calc(100% - 2rem), var(--max-width));
  margin-inline: auto;
}

.header-inner {
  padding-block: 0.8rem 0.65rem;
}

/*
Der Logo-Link nimmt nur die tatsächlich benötigte Breite ein.
line-height: 0 entfernt einen sonst möglichen kleinen Leerraum unter dem Bild.
*/
.brand {
  display: inline-block;
  line-height: 0;
}

.brand img {
  display: block;
  width: min(718px, 100%);
  border: 1px solid #babdc0;
}

/*
===============================================================================
6. HAUPTNAVIGATION
===============================================================================
Dunkler Navigationsbalken mit roter Abschlusslinie.
===============================================================================
*/
.site-nav {
  background: #2f3134;
  border-bottom: 4px solid var(--accent);
}

/*
Die Menüpunkte stehen auf größeren Bildschirmen nebeneinander und dürfen bei
Platzmangel umbrechen. Standard-Listenpunkte und -abstände werden entfernt.
*/
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
display: block macht die gesamte Menüfläche anklickbar.
aria-current="page" kennzeichnet den aktiven Menüpunkt.
*/
.site-nav a {
  display: block;
  padding: 0.8rem 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,0.16);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--accent);
  color: #fff;
}

/*
===============================================================================
7. HAUPTINHALT UND INHALTSKARTE
===============================================================================
Der Hauptinhalt erhält vertikalen Abstand. Die weiße Inhaltskarte hebt sich
durch Rahmen, Rundung und Schatten vom grauen Seitenhintergrund ab.
===============================================================================
*/
main {
  padding-block: 1.5rem 2rem;
}

/*
clamp() erzeugt einen flexiblen Innenabstand:
mindestens 1.1rem, bevorzugt 3vw, höchstens 2.1rem.
*/
.content-card {
  padding: clamp(1.1rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/*
===============================================================================
8. ÜBERSCHRIFTEN UND TEXTBREITEN
===============================================================================
Überschriften besitzen einen engeren Zeilenabstand als Fließtext.
text-wrap: balance versucht mehrzeilige Überschriften optisch auszugleichen.
===============================================================================
*/
h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
}

/*
Hauptüberschrift jeder Seite mit flexibler Schriftgröße und roter Unterlinie.
clamp(Mindestwert, Wunschwert, Höchstwert)
*/
h1 {
  margin: 0 0 0.8rem;
  padding-bottom: 0.2rem;
/*
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  border-bottom: 2px solid var(--accent);
*/
  font-size: clamp(1.25rem, 4vw, 1.8rem);
  border-bottom: 2px solid var(--accent);
}

h2 {
  margin-top: 1.3rem;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
}

h3 {
  margin-top: 1.1rem;
  font-size: 1.16rem;
}

/*
Die maximale Zeilenlänge wird auf ungefähr 76 Zeichen begrenzt.
Das verbessert die Lesbarkeit längerer Texte.
auf 126 geändert
*/
p,
ul,
ol,
dl,
table,
blockquote {
  max-width: 126ch;
}

.lead {
  font-size: 1.16rem;
}

/*
===============================================================================
9. MEHRSPALTIGE INHALTSBEREICHE
===============================================================================
service-grid, link-grid und contact-grid verwenden dasselbe zweispaltige Raster.
minmax(0, 1fr) verhindert, dass lange Inhalte eine Spalte unnötig verbreitern.
===============================================================================
*/
.service-grid,
.link-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.2rem;
}

/*
===============================================================================
10. INFORMATIONSFELDER
===============================================================================
Ein Panel ist eine einzelne Inhaltskarte innerhalb eines Rasters.
Die rote linke Linie dient als wiederkehrendes Gestaltungselement.
===============================================================================
*/
.panel {
  padding: 0.9rem 1.1rem;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
}

.panel p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.3;
}

.panel h2,
.panel h3 {
  margin-top: 0;
  margin-bottom: 0.65rem;
}

/*
===============================================================================
11. AUFZÄHLUNGEN UND HINWEISFELDER
===============================================================================
Checklisten erhalten einen kontrollierten Einzug und zusätzlichen Abstand
zwischen den einzelnen Punkten.
===============================================================================
*/
.check-list {
  padding-left: 1.25rem;
}

.check-list li {
  margin-block: 0.2rem;
  line-height: 1.2;
}

/*
Gelbes Hinweisfeld für wichtige Informationen, Warnungen oder Arbeitsstände.
*/
.notice {
  padding: 0.9rem 1rem;
  background: #fff8db;
  border: 1px solid #d3b64b;
  border-radius: var(--radius);
}

/*
===============================================================================
12. PREISTABELLE
===============================================================================
Die Tabelle nutzt die verfügbare Breite bis maximal 760 Pixel.
border-collapse führt benachbarte Zellrahmen zu einer Linie zusammen.
===============================================================================
*/
.price-table {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin-block: 1rem 1.5rem;
}

.price-table th,
.price-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
}

.price-table th {
  background: #eceeef;
}

/*
Die letzte Spalte enthält Preise:
kein Zeilenumbruch und rechtsbündige Ausrichtung.
*/
.price-table td:last-child,
.price-table th:last-child {
  white-space: nowrap;
  text-align: right;
}

/*
===============================================================================
13. ZITATE-BEREICH
===============================================================================
Diese Regeln gestalten den äußeren Zitatekasten. Die Detaildarstellung der
per JavaScript erzeugten Zitate befindet sich zusätzlich in zitate.css.
===============================================================================
*/
.quote-box {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  background: #f6f6f6;
  border-left: 5px solid var(--accent);
}

.quote-box blockquote {
  margin: 0;
  font-size: 1rem;
}

.quote-box footer {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/*
===============================================================================
14. EXTERNE LINKS
===============================================================================
Das Zeichen ↗ kennzeichnet automatisch Links zu externen Angeboten.
===============================================================================
*/
.external-link::after {
  content: " ↗";
  font-size: 0.85em;
}

/*
===============================================================================
15. RECHTSTEXTE
===============================================================================
Rechtstexte dürfen etwas breiter als normale Fließtexte werden, bleiben aber
weiterhin auf eine gut lesbare Zeilenlänge begrenzt.
===============================================================================
*/
.legal-text h2 {
  margin-top: 2.1rem;
}

.legal-text p,
.legal-text li {
  max-width: 85ch;
}

/*
Browser stellen <address> häufig kursiv dar.
Für das Impressum wird bewusst normale Schrift verwendet.
*/
address {
  font-style: normal;
}

/*
===============================================================================
16. FUSSZEILE
===============================================================================
Dunkler Hintergrund mit heller Schrift und roter oberer Trennlinie.
===============================================================================
*/
.site-footer {
  color: #f6f6f6;
  background: #2f3134;
  border-top: 4px solid var(--accent);
}

.footer-inner {
  padding-block: 1.25rem;
}

/*
Die rechtlichen Links stehen nebeneinander und dürfen bei Bedarf umbrechen.
*/
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: #fff;
}

.footer-links a:hover {
  color: #ffd8d5;
}

.copyright {
  margin: 0;
  color: #d7d7d7;
  font-size: 0.96rem;
}

.back-to-top {
  display: inline-block;
  margin-top: 0.7rem;
  color: #fff;
}

/*
===============================================================================
17. RESPONSIVE DARSTELLUNG BIS 720 PIXEL
===============================================================================
Dieser Bereich gilt für Tablets, Smartphones und schmale Browserfenster.
Die Grundschrift wird auf ungefähr 16 Pixel reduziert, Raster werden
einspaltig und die Navigation wird fingerfreundlich angeordnet.
===============================================================================
*/
@media (max-width: 720px) {
  body {
    font-size: 1rem;
  }

  .header-inner,
  .nav-inner,
  .main-inner,
  .footer-inner {
    width: min(calc(100% - 1rem), var(--max-width));
  }

  .header-inner {
    padding-block: 0.45rem;
  }

  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav a {
    min-height: 3.15rem;
    padding: 0.7rem 0.65rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.16);
  }

  .service-grid,
  .link-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  main {
    padding-block: 0.75rem 1rem;
  }

  .content-card {
    border-radius: 4px;
  }

  .price-table {
    font-size: 0.96rem;
  }
}

/*
===============================================================================
18. RESPONSIVE DARSTELLUNG BIS 410 PIXEL
===============================================================================
Für besonders schmale Smartphones wird die Navigation einspaltig.
Zu breite Tabellen können horizontal gescrollt werden.
===============================================================================
*/
@media (max-width: 410px) {
  .site-nav ul {
    grid-template-columns: 1fr;
  }

  .price-table {
    display: block;
    overflow-x: auto;
  }
}

/*
===============================================================================
19. DRUCKDARSTELLUNG
===============================================================================
Navigation und reine Bildschirmfunktionen werden beim Drucken ausgeblendet.
Hintergrund, Farben, Schatten und Schriftgröße werden druckgerecht angepasst.
===============================================================================
*/
@media print {
  .skip-link,
  .site-nav,
  .back-to-top {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .content-card {
    border: 0;
    box-shadow: none;
  }

  a {
    color: #000;
  }
}