/* Gestaltung audits.johannesmairhofer.de. Farben aus der Kadence-Palette von
   johannesmairhofer.de, wie im Audit-Bericht (Tools/19_wordpress-audit,
   bericht-generator.py, Layout "johannes"): Lila #69227b, Beere #7d1d54,
   Nachtblau #26285b, helle Flaechen #F7FAFC / #EDF2F7. Das Coral #fe665d ist
   bei ihm die Schaltflaechenfarbe und wird nur dafuer benutzt.
   Keine Gestaltung im HTML, die Sicherheits-Header blockieren style="..." und <style>. */

:root{
  --text:#000;
  --text-leise:#4d4d4d;
  --grund:#fff;
  --flaeche:#F7FAFC;
  --flaeche-2:#EDF2F7;
  --linie:#dfe6ee;
  --akzent:#69227b;          /* Lila: Links, Dachzeile, Fokus, starke Kachel */
  --akzent-text:#fff;
  --akzent-hell:#f2e6f6;
  --beere:#7d1d54;
  --nacht:#26285b;           /* dunkle Baender */
  --nacht-text:#fff;
  --knopf:#fe665d;           /* Coral, nur fuer Schaltflaechen. Schwarze Schrift: Kontrast 7,3 zu 1 */
  --knopf-text:#000;
  --knopf-rand:#7a2a24;      /* dunkles Coral fuer den Rand, 3:1 gegen Weiss und gegen Coral */
  --stufe-sofort:#8c1904;
  --stufe-bald:#69227b;
  --stufe-klaer:#26285b;
  --fehler:#8c1904;
  --fehler-flaeche:#fbe3de;
  --breite:72rem;
  --breite-schmal:44rem;
  --radius:.6rem;
  /* Systemschriften, laden nichts nach. */
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;font-family:var(--schrift);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--flaeche)}
img,svg,picture{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;overflow-wrap:break-word}
h1{font-size:clamp(2rem,4vw + 1rem,3.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,2vw + 1rem,2.2rem)}
h3{font-size:1.15rem;hyphens:auto}
p{margin:0 0 1em}
a{color:var(--akzent)}
ul[role="list"],ol[role="list"]{list-style:none;margin:0;padding:0}

/* Barrierefreiheit: Sprunglink und sichtbarer Fokus */
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--text);color:#fff;padding:.7rem 1rem}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.section--dunkel :focus-visible{outline-color:var(--knopf)}
/* Im weissen Formularkasten waere Coral als Fokusring zu schwach (2,9:1), dort Lila */
.section--dunkel .formular :focus-visible{outline-color:var(--akzent)}

/* Wiederkehrendes Sektions-Geruest */
.section{padding-block:clamp(2.5rem,6vw,5rem)}
.section__inner{max-width:var(--breite);margin-inline:auto;padding-inline:1.25rem}
.section__inner--schmal{max-width:var(--breite-schmal)}
.section--weiss{background:var(--grund);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.section--dunkel{background:var(--nacht);color:var(--nacht-text)}
.section--dunkel a{color:var(--nacht-text)}
.section__intro{max-width:46rem;margin-bottom:2rem}
.lead{font-size:1.2rem;max-width:60ch}
.dachzeile{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);margin-bottom:.75rem}

/* Knoepfe */
/* Dunkler 1px-Rand: Coral hebt sich von Weiss nur mit 2,9:1 ab, die
   Knopfflaeche braucht 3:1 (WCAG 1.4.11). Mit dem Rand ist die Form klar. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--knopf);color:var(--knopf-text);border:1px solid var(--knopf-rand);border-radius:var(--radius);padding:.8rem 1.4rem;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn--zweitrangig{background:transparent;color:var(--text);border-color:var(--text)}
.section--dunkel .btn--zweitrangig{color:var(--nacht-text);border-color:var(--nacht-text)}
.btn--klein{padding:.5rem 1rem}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.5rem}
.aktionen--mittig{justify-content:center}
.cta-hinweis{font-size:.95rem}
.section--dunkel .cta-hinweis{color:var(--nacht-text)}

/* Kopfbereich */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linie);background:var(--grund)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:block;color:var(--text);text-decoration:none}
.main-nav ul{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.main-nav a{color:var(--text);text-decoration:none;font-weight:600}
.main-nav a.btn{color:var(--knopf-text)}
.nav-toggle{display:none;width:2.75rem;height:2.75rem;background:none;border:1px solid var(--linie);border-radius:var(--radius);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle__icon,.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";display:block;position:relative;width:1.25rem;height:2px;background:var(--text)}
.nav-toggle__icon::before{position:absolute;top:-6px}
.nav-toggle__icon::after{position:absolute;top:6px}
.mobile-nav{position:fixed;inset:0;z-index:500;background:var(--grund);padding:4.5rem 1.25rem 2rem}
.mobile-nav[hidden]{display:none}
.mobile-nav__close{position:absolute;top:.75rem;right:1rem;background:none;border:0;font-size:2.25rem;line-height:1;cursor:pointer;color:var(--text)}
.mobile-nav a{display:block;padding:.8rem 0;border-bottom:1px solid var(--linie);color:var(--text);font-size:1.3rem;font-weight:700;text-decoration:none}
@media (max-width:860px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* Hero */
.hero__raster{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
/* ul.vertrauen statt .vertrauen: die Grundregel ul[role="list"]{margin:0} hat
   sonst Vorrang und frisst den Abstand nach oben */
ul.vertrauen{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:2.25rem 0 0;font-size:.95rem}
.vertrauen li{display:flex;align-items:center;gap:.5rem}
.haken{width:1.1rem;height:1.1rem;flex:none;color:var(--akzent)}
.section--dunkel .haken{color:var(--knopf)}

/* Beispielbericht im Hero: Aufbau wie im echten Bericht */
.bericht{background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);padding:1.25rem;box-shadow:0 18px 40px rgba(38,40,91,.12)}
.bericht__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.bericht__kopf span{font-size:.85rem;color:var(--text-leise)}
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1rem}
.kachel{background:var(--grund);border:1px solid var(--linie);border-radius:.5rem;padding:.75rem .7rem}
.kachel b{display:block;font-size:1.6rem;line-height:1.1}
.kachel small{display:block;font-size:.78rem;margin-top:.25rem}
.kachel--stark{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.befund{display:flex;gap:.75rem;padding:.8rem 0;border-top:1px solid var(--linie)}
.befund__nr{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--text);color:#fff;font-size:.8rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.befund p{margin:.25rem 0 0;font-size:.92rem}
/* Die Stufe steht immer in einer eigenen Zeile unter dem Titel, bei allen
   Befunden gleich. Vorher stand sie mal neben, mal unter dem Titel, das war
   unruhig (Rueckmeldung User 08.10.2026). nowrap: nie im Wort getrennt. */
.stufe{display:block;width:max-content;white-space:nowrap;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:.15rem .55rem;border-radius:999px;margin:.35rem 0 0}
.stufe--sofort{background:var(--stufe-sofort)}
.stufe--bald{background:var(--stufe-bald)}
.stufe--klaer{background:var(--stufe-klaer)}
.bericht__fuss{margin:.75rem 0 0;font-size:.8rem;color:var(--text-leise)}

/* Karten und Raster */
.raster{display:grid;gap:1.25rem}
.raster--2{grid-template-columns:repeat(2,1fr)}
.raster--3{grid-template-columns:repeat(3,1fr)}
.karte{background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem}
.section--weiss .karte{background:var(--flaeche)}
.karte h3{margin-bottom:.5rem}
.karte p:last-child{margin-bottom:0}
.karte ul{margin:0;padding-left:1.2rem}
.karte li{margin-bottom:.3rem}
.icon{width:1.9rem;height:1.9rem;color:var(--akzent);margin-bottom:.75rem}

/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:schritt}
.schritte li{counter-increment:schritt;position:relative;padding-top:3.2rem}
.schritte li::before{content:counter(schritt);position:absolute;top:1.2rem;left:1.4rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--text);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.wer{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--akzent-hell);color:var(--akzent);padding:.15rem .5rem;border-radius:.3rem;margin-bottom:.6rem}

/* Vergleich Scan gegen Audit */
.tabelle-wrap{overflow-x:auto}
.vergleich{width:100%;border-collapse:collapse;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.vergleich th,.vergleich td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.vergleich thead th{font-size:.9rem;background:var(--flaeche-2)}
.vergleich thead th:last-child{background:var(--akzent);color:var(--akzent-text)}
.vergleich tbody td:last-child{font-weight:700}
.vergleich tbody th{font-weight:700}

/* Zwischen-CTA */
.band .section__inner{text-align:center;max-width:46rem}
.band h2{margin-bottom:.5rem}

/* Ansprechperson */
.anbieter{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center}
.anbieter__bild{width:180px;height:180px;border-radius:50%;background:var(--flaeche);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;overflow:hidden}
.anbieter__bild img{width:120px;height:120px}
.anbieter h2{font-size:clamp(1.4rem,2vw + .8rem,2rem)}

/* Pakete */
.paket{display:flex;flex-direction:column}
.paket__preis{font-size:1.6rem;font-weight:800;margin-bottom:1rem}
.paket__preis small{display:block;font-size:.85rem;font-weight:400;color:var(--text-leise)}
.paket ul{margin-bottom:1.5rem}
.paket .btn{margin-top:auto;align-self:flex-start}

/* Fragen */
.faq{max-width:52rem}
.faq details{background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:1.1rem 1.4rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--akzent)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 1.4rem 1.1rem;margin:0}

/* Anfrage */
.anfrage{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.anfrage .vertrauen{flex-direction:column}
.formular{background:var(--grund);color:var(--text);border-radius:var(--radius);padding:1.75rem}
.formular a{color:var(--akzent)}
.form{display:grid;gap:1rem}
.form__feld{display:grid;gap:.35rem}
.form__feld label{font-weight:600}
.form input[type="text"],.form input[type="email"],.form input[type="url"],.form textarea{width:100%;font:inherit;color:var(--text);background:var(--grund);border:1px solid var(--text-leise);border-radius:var(--radius);padding:.7rem .8rem}
.form__feld--checkbox{grid-template-columns:auto 1fr;align-items:start;gap:.6rem}
.form__feld--checkbox input{width:1.2rem;height:1.2rem;margin-top:.2rem}
.form__feld--checkbox label{font-weight:400;font-size:.92rem}
.form .btn{width:100%}
.form__hinweis{text-align:center;font-size:.9rem;margin:0}
/* Honigtopf: aus dem Bild geschoben statt display:none, manche Bots
   ueberspringen versteckte Felder */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-hinweis{background:var(--fehler-flaeche);border:1px solid var(--fehler);color:var(--fehler);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:1rem;font-weight:600}

/* Feste Anfrage-Leiste auf dem Handy */
.mobil-cta{display:none}

/* Fussbereich: weiss als Gegenpol zum dunklen Anfrage-Block darueber */
.site-footer{background:var(--grund);border-top:1px solid var(--linie);padding-block:3.5rem 1.5rem;font-size:.95rem}
.site-footer__spalten{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2.5rem 3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--linie)}
.site-footer__marke .brand{margin-bottom:1rem}
.site-footer__satz{max-width:30rem;margin-bottom:1rem}
.site-footer address{font-style:normal;line-height:1.7}
.site-footer a{color:var(--text);text-decoration:none}
.site-footer a:hover{color:var(--akzent)}
.site-footer address a,.site-footer__zeile a{text-decoration:underline;text-underline-offset:.2em}
.site-footer__titel{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent);margin:0 0 .9rem}
.site-footer__nav ul{display:grid;gap:.5rem}
.site-footer__nav a{font-weight:600}
.site-footer__zeile{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;padding-top:1.25rem;color:var(--text-leise)}
.site-footer__zeile ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.site-footer__copy{margin:0}
/* Kanaele kompakt: Zeilen statt Kacheln. Mit .site-footer davor, damit die
   Regeln die Kachel-Regeln der Danke-Seite weiter unten sicher ueberstimmen. */
.site-footer .kanaele--kompakt{display:grid;grid-template-columns:1fr;gap:.35rem}
.site-footer .kanaele--kompakt a{padding:.25rem 0;background:none;border:0;border-radius:0;gap:.7rem;min-height:2.75rem;font-weight:600}
.site-footer .kanaele--kompakt a:hover{color:var(--akzent)}
.site-footer .kanaele--kompakt .kanal__icon{width:1.5rem;height:1.5rem}
@media (max-width:900px){
  .site-footer__spalten{grid-template-columns:1fr 1fr}
  .site-footer__marke{grid-column:1 / -1}
}
@media (max-width:600px){
  .site-footer__spalten{grid-template-columns:1fr}
}

/* Danke-Seite nach der Anfrage */
.danke__block{display:grid;grid-template-columns:auto 1fr;gap:1.75rem;align-items:center;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);padding:1.75rem}
.danke__block h1{font-size:clamp(1.6rem,2vw + 1rem,2.2rem);margin-bottom:.4em}
.danke__block .lead{margin:0;font-size:1.05rem}
.danke__kopf{width:110px;height:110px;border-radius:50%;background:var(--flaeche);border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;overflow:hidden}
.danke__kopf img{width:76px;height:76px}
.danke__titel{font-size:1.2rem;margin:2rem 0 1rem}
.kanaele{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;text-align:left}
.kanaele a{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);color:var(--text);text-decoration:none}
.kanaele a:hover{border-color:var(--akzent)}
.kanal__icon{width:2rem;height:2rem;flex:none;color:var(--akzent)}
.kanal__text{display:grid;gap:.1rem;line-height:1.35}
.kanal__text small{font-size:.85rem;color:var(--text-leise)}
.danke .aktionen{margin-top:2rem}
@media (max-width:600px){
  .kanaele{grid-template-columns:1fr}
  .danke__block{grid-template-columns:1fr;text-align:center}
  .danke__kopf{margin-inline:auto}
}

/* Seitenuebersicht (Sitemap fuer Menschen) */
.seitenliste{display:grid;gap:.5rem;margin-top:1.5rem}
.seitenliste{list-style:none;padding:0}
.seitenliste li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.9rem 1.1rem;background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius)}
.seitenliste a{font-weight:700;text-decoration:none}
.seitenliste span{font-size:.9rem;color:var(--text-leise);overflow-wrap:anywhere}
.sitemap__maschine{margin-top:1.5rem;font-size:.95rem;color:var(--text-leise)}

/* Fehlerseite */
.kennung{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fehler);margin-bottom:.5rem}
.linkliste{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:2rem}

/* Rechtstexte: lange Woerter und Adressen umbrechen */
.rechtstext{overflow-wrap:break-word}

@media (max-width:900px){
  .hero__raster,.anfrage,.anbieter{grid-template-columns:1fr}
  .raster--3,.schritte{grid-template-columns:1fr 1fr}
  .anbieter__bild{margin-inline:auto}
}
@media (max-width:600px){
  body{font-size:1rem}
  .raster--2,.raster--3,.schritte{grid-template-columns:1fr}
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .mobil-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.6rem 1rem;background:var(--grund);border-top:1px solid var(--linie)}
  .mobil-cta .btn{width:100%}
  .site-footer{padding-bottom:5rem}
}

/* Weniger Bewegung, wenn das System es verlangt */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}