/* schropp.digital – Stylesheet
   Corporate Design 1.0: Outfit, Nachtblau #091A25, Petrol #439C94,
   Signal #A3D3CD, Petrol dunkel #2B7770, Schiefer #5C6B73, Papier #F6F8F8 */

/* --- Schrift -------------------------------------------------------------
   Outfit kommt derzeit von Google Fonts (siehe <link> in den Seiten).
   Vor dem Livegang lokal einbinden: Dateien nach assets/fonts/ legen,
   den <link> aus allen Seiten entfernen und diesen Block einkommentieren.
   Erst dann stimmt die Aussage der Datenschutzerklärung,
   dass keine Inhalte von fremden Servern geladen werden.

@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
  U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
--------------------------------------------------------------------------- */

:root{
  --nacht:#091a25;
  --petrol:#439c94;
  --petrol-dunkel:#2b7770;
  --signal:#a3d3cd;
  --mint:#e6f2f0;
  --schiefer:#5c6b73;
  --text:#3d4c55;
  --papier:#f6f8f8;
  --linie:#e2e8e8;
  /* Rahmen von Eingabefeldern: mindestens 3:1 zum weißen Untergrund (WCAG 1.4.11);
     das frühere #CFD8DA lag bei 1,45:1 */
  --feldrahmen:#7d8d94;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--nacht);
  font-family:'Outfit',"Century Gothic","Trebuchet MS",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

p{margin:0;text-wrap:pretty}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.025em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(30px,3.8vw,46px)}
h2{font-size:clamp(25px,2.8vw,34px)}
h3{font-size:clamp(19px,1.6vw,22px);font-weight:500;letter-spacing:-0.01em;line-height:1.25}

a{color:var(--petrol-dunkel);text-decoration:none}
a:hover{color:var(--nacht)}

:focus-visible{outline:3px solid var(--petrol-dunkel);outline-offset:3px;border-radius:4px}

img{max-width:100%;height:auto}

/* --- Raster --------------------------------------------------------------- */

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.sec{padding-top:clamp(40px,5.5vw,76px)}
.sec-end{padding-bottom:clamp(48px,6vw,88px)}
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}

/* cols-3 und cols-4 haben feste Stufen statt auto-fit, damit nie eine einzelne
   Karte allein in der letzten Zeile steht:
   - unter 600 px eine Spalte
   - mittlere Breite zwei Spalten; eine einzelne letzte Karte läuft über die ganze Breite
   - breit: cols-3 auf einem 6er-Raster. 3 Karten stehen nebeneinander, bei 5 Karten
     folgt eine Zeile mit zwei breiten (3+2), bei 4 eine mit einer vollbreiten (3+1).
     cols-4 steht ab 1100 px viermal nebeneinander. */
.cols-3,.cols-4{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px) and (max-width:1099px){
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-4>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:600px) and (max-width:959px){
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:960px){
  .cols-3{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cols-3>*{grid-column:span 2}
  .cols-3>:last-child:nth-child(3n+1){grid-column:span 6}
  .cols-3>:last-child:nth-child(3n+2),
  .cols-3>:nth-last-child(2):nth-child(3n+1){grid-column:span 3}
}
@media (min-width:1100px){
  .cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.stack{display:flex;flex-direction:column}

/* --- Kopfzeile ------------------------------------------------------------ */

.skip{position:absolute;left:-9999px}
.skip:focus{left:50%;transform:translateX(-50%);top:8px;z-index:9;
  background:#fff;padding:12px 20px;border-radius:999px}

.hdr{display:flex;align-items:center;justify-content:space-between;
  gap:4px 32px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}

.brand{display:flex;align-items:center;gap:11px;color:var(--nacht);min-height:44px}
.brand:hover{color:var(--nacht)}
.brand svg{width:38px;height:38px;flex:none}
.wm{font-size:25px;font-weight:600;letter-spacing:-0.035em;line-height:1;white-space:nowrap}
.dot{display:inline-block;width:0.13em;height:0.13em;background:var(--petrol);
  margin:0 0.05em 0 0.085em;vertical-align:baseline}
.teal{color:var(--petrol)}

.nav{display:flex;flex-wrap:wrap;gap:0 24px;align-items:center;font-size:16px;font-weight:500}
.nav a{color:var(--nacht);min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--petrol-dunkel)}
.nav a[aria-current]{color:var(--petrol-dunkel);box-shadow:inset 0 -3px 0 var(--petrol)}

/* --- Textbausteine -------------------------------------------------------- */

.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--text);max-width:34em}
.body{font-size:17px;color:var(--text);max-width:40em}
.muted{color:var(--schiefer)}
/* Kurze Komposita (IT-Projekte, E-Rechnung …) nie am Bindestrich trennen */
.nw{white-space:nowrap}
.small{font-size:15px}

/* Kategorie-Auszeichnung. Nur dort, wo sie eine Angabe trägt
   (Betriebsgröße, Dauer, Schritt) – nicht als Dekoration über jeder Überschrift. */
.meta{font-size:14px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--petrol-dunkel)}
.meta-hell{color:var(--signal)}

.head{display:flex;flex-direction:column;gap:12px;margin-bottom:26px;max-width:40em}

/* --- Flächen -------------------------------------------------------------- */

.card{background:#fff;border-radius:18px;padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:12px}
.card h3{color:var(--nacht)}
.card-gross{border-radius:26px;padding:clamp(26px,3vw,40px);gap:18px}
.card-mint{background:var(--mint)}
.card-dunkel{background:var(--nacht);color:#c9d6db}
.card-dunkel h2,.card-dunkel h3{color:#fff}
.card-dunkel .muted{color:#9fb0b8}

.band{border-radius:28px;padding:clamp(26px,4vw,56px)}
.band-mint{background:var(--mint)}
.band-petrol{background:var(--petrol-dunkel);color:#fff}
.band-nacht{background:var(--nacht);color:#c9d6db}
.band-petrol a:not(.btn),.band-nacht a:not(.btn){color:#fff}

/* --- Schaltflächen -------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 26px;border-radius:999px;background:var(--petrol-dunkel);color:#fff;
  font-weight:500;font-size:16px;white-space:nowrap;border:0;cursor:pointer;
  font-family:inherit;text-align:center}
.btn:hover{background:var(--nacht);color:#fff}
.btn-hell{background:var(--signal);color:var(--nacht)}
.btn-hell:hover{background:#fff;color:var(--nacht)}
.btn-linie{background:transparent;color:var(--nacht);box-shadow:inset 0 0 0 1.5px var(--nacht)}
.btn-linie:hover{background:var(--nacht);color:#fff}
.btn-reihe{display:flex;flex-wrap:wrap;gap:12px}

/* --- Bilder --------------------------------------------------------------- */

.foto{display:block;width:100%;object-fit:cover;border-radius:24px;background:var(--mint)}

/* --- Kontaktblock --------------------------------------------------------- */

.tel{font-size:clamp(27px,3.4vw,42px);font-weight:600;letter-spacing:-0.025em;white-space:nowrap;
  line-height:1.1;display:inline-block}
.band-petrol .tel,.band-nacht .tel{color:#fff}

/* --- Tabellen ------------------------------------------------------------- */

.scroll{overflow-x:auto;background:#fff;border-radius:18px;padding:6px 14px}
.scroll:focus-visible{outline-offset:0}
.tbl{width:100%;border-collapse:collapse;font-size:16px;min-width:620px}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linie);
  vertical-align:top}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-weight:600;color:var(--nacht)}
.tbl tbody th{font-weight:500;color:var(--text);width:26%}
.tbl td{color:var(--text)}
.tbl .summe{font-weight:600;color:var(--nacht)}

/* Schmale Bildschirme: Tabellen werden gestapelt statt seitlich zu scrollen.
   Jede Zeile wird zu einem Block, die Zellen tragen ihre Spaltenüberschrift
   aus data-label. Die Kopfzeile bleibt für Screenreader erhalten. */
@media (max-width:720px){
  .scroll{padding:4px 18px}
  .tbl{min-width:0}
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl tr{padding:15px 0;border-bottom:1px solid var(--linie)}
  .tbl tr:last-child{border-bottom:0}
  .tbl th,.tbl td{padding:0;border:0}
  .tbl tbody th{width:auto;margin-bottom:6px;font-weight:600;color:var(--nacht)}
  .tbl td[data-label]{display:flex;justify-content:space-between;gap:20px;padding:4px 0;text-align:right}
  .tbl td[data-label]::before{content:attr(data-label);flex:none;text-align:left;color:var(--schiefer)}
}

/* --- Werdegang ------------------------------------------------------------ */

.vita{background:#fff;border-radius:18px;padding:4px clamp(20px,3vw,34px)}
.vita-zeile{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:6px 30px;padding:20px 0;border-bottom:1px solid var(--linie)}
.vita-zeile:last-child{border-bottom:0}
.vita-jahr{color:var(--schiefer);font-variant-numeric:tabular-nums}
.vita-zeile h3,.vita-zeile p{overflow-wrap:break-word}
/* Schmal: Jahr über dem Eintrag, damit der Text die volle Kartenbreite bekommt */
@media (max-width:600px){
  .vita-zeile{grid-template-columns:minmax(0,1fr);gap:2px;padding:16px 0}
}

/* --- Fragen und Antworten ------------------------------------------------- */

details{background:#fff;border-radius:16px;padding:0 22px}
summary{cursor:pointer;min-height:58px;display:flex;align-items:center;
  font-size:18px;font-weight:500;list-style:none;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:26px;line-height:1;
  color:var(--petrol-dunkel)}
details[open] summary::after{content:"–"}
details p{padding-bottom:22px;color:var(--text);max-width:48em}

/* --- Formular ------------------------------------------------------------- */

.formkarte{background:#fff;border-radius:26px;padding:clamp(22px,3vw,38px)}
.form{display:grid;gap:18px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld label{font-weight:500;font-size:16px}
.feld .hinweis{font-size:14px;color:var(--schiefer)}
.feld input,.feld textarea{
  font-family:inherit;font-size:17px;color:var(--nacht);background:#fff;
  border:1.5px solid var(--feldrahmen);border-radius:12px;padding:13px 15px;min-height:50px;width:100%}
.feld textarea{min-height:170px;resize:vertical;line-height:1.55}
.feld input:hover,.feld textarea:hover,.feld select:hover{border-color:var(--schiefer)}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--petrol-dunkel);
  outline:2px solid var(--petrol-dunkel);outline-offset:1px}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#a4331d}
.fehler{color:#8c2b16;font-size:15px;font-weight:500}
.hinweiskasten{background:var(--mint);border-radius:14px;padding:16px 18px;
  font-size:15px;color:var(--text)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:18px;padding:20px 22px;font-size:17px}
.meldung-ok{background:var(--mint);color:var(--nacht)}
.meldung-fehler{background:#fdeeea;color:#8c2b16}

/* --- Fußzeile ------------------------------------------------------------- */

.ftr{background:var(--nacht);color:#c9d6db;border-radius:28px 28px 0 0;margin-top:clamp(40px,5vw,72px)}
.ftr a{color:#fff}
.ftr a:hover{color:var(--signal)}
.ftr-innen{padding-top:44px;padding-bottom:38px;display:flex;flex-wrap:wrap;
  gap:28px 56px;justify-content:space-between}
.ftr .wm{color:#fff}
.ftr-nav{display:flex;flex-wrap:wrap;gap:0 26px;align-items:flex-start;font-size:16px}
.ftr-nav a{min-height:44px;display:inline-flex;align-items:center}

@media print{
  .nav,.ftr-nav,.btn{display:none}
  body{background:#fff;font-size:11pt}
}

/* --- Karte des Einsatzgebiets --------------------------------------------- */

.karte{width:100%;height:auto;display:block;font-family:inherit;font-size:17px}
.karte .sitz{font-size:19px}
.karte .land,.karte .mass{font-size:17px}
@media (max-width:760px){
  .karte{font-size:27px}
  .karte .sitz{font-size:30px}
  .karte .land{font-size:25px}
  .karte .mass{font-size:28px}
  .karte .ort:not(.haupt){display:none}
}
.karte-legende{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;color:var(--schiefer)}
.karte-legende span{display:inline-flex;align-items:center;gap:9px}
.karte-legende i{width:24px;flex:none}

/* --- Musterdokumente ------------------------------------------------------ */

.doc{background:#fff;border-radius:6px;border:1px solid var(--linie);
  max-width:860px;margin:0 auto;padding:clamp(26px,4vw,54px)}
.doc-kopf{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;
  align-items:flex-start;border-bottom:2px solid var(--nacht);padding-bottom:16px;margin-bottom:26px}
.doc h1{font-size:clamp(22px,2.4vw,28px);margin-bottom:4px}
.doc h2{font-size:17px;font-weight:600;letter-spacing:0;margin:30px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--linie)}
.doc p,.doc td,.doc th,.doc li{font-size:15px}
.doc .muster{display:inline-block;font-size:12px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:#8c2b16;border:1.5px solid #8c2b16;
  border-radius:4px;padding:4px 9px}
.feldliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:12px 32px;margin:0}
.feldliste div{display:flex;flex-direction:column;gap:2px}
.feldliste dt,.feldliste .t{font-size:13px;color:var(--schiefer)}
.feldliste dd,.feldliste .w{margin:0;font-size:15px;font-weight:500;color:var(--nacht)}
.doc-tab{width:100%;border-collapse:collapse;margin-top:4px}
.doc-tab th,.doc-tab td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--linie);
  vertical-align:top;font-size:14px}
.doc-tab thead th{font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--schiefer);font-weight:500}
.doc-tab .zahl{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rang{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.rang::before{content:"";width:5px;height:15px;border-radius:2px;background:var(--signal)}
.rang.sofort::before{background:var(--nacht)}
.rang.bald::before{background:var(--petrol-dunkel)}
.unterschrift{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:28px 44px;margin-top:34px}
.unterschrift div{border-top:1px solid var(--nacht);padding-top:7px;font-size:13px;color:var(--schiefer)}
.doc-fuss{margin-top:30px;padding-top:12px;border-top:1px solid var(--linie);
  font-size:12.5px;color:var(--schiefer);display:flex;flex-wrap:wrap;gap:6px 24px;
  justify-content:space-between}
.zurueck{max-width:860px;margin:0 auto 18px;padding:0 4px}

.doc-vorschau{background:#fff;border:1px solid var(--linie);border-radius:6px;
  padding:20px 22px 0;position:relative;overflow:hidden;height:252px}
.doc-vorschau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;
  background:linear-gradient(rgba(255,255,255,0),#fff)}
.doc-vorschau .kopf{display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;border-bottom:1.5px solid var(--nacht);padding-bottom:9px;margin-bottom:13px}
.doc-vorschau .titel{font-size:14.5px;font-weight:600;letter-spacing:-0.01em;line-height:1.25}
.doc-vorschau .mini{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:#8c2b16;border:1px solid #8c2b16;border-radius:3px;padding:2px 6px;flex:none}
.doc-vorschau table{width:100%;border-collapse:collapse}
.doc-vorschau td,.doc-vorschau th{font-size:12.5px;padding:6px 6px 6px 0;
  border-bottom:1px solid var(--linie);text-align:left;color:var(--text)}
.doc-vorschau th{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--schiefer);font-weight:500}

@media print{
  .zurueck,.ftr,.hdr,.skip{display:none}
  body{background:#fff}
  .doc{border:0;max-width:none;padding:0;border-radius:0}
  .doc h2{page-break-after:avoid}
  .doc-tab{page-break-inside:auto}
  .doc-tab tr{page-break-inside:avoid}
  @page{margin:18mm 16mm}
}
.doc-scroll{overflow-x:auto}
.doc-scroll .doc-tab{min-width:520px}
@media print{.doc-scroll{overflow:visible}.doc-scroll .doc-tab{min-width:0}}

/* --- Platzhalter- und Fehlerseiten ---------------------------------------- */

.platz{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:clamp(22px,3.5vw,38px);padding:clamp(40px,8vw,72px) clamp(20px,5vw,48px);
  background:var(--nacht);color:#c9d6db}
.platz h1{color:#fff;max-width:16em}
.platz .lede{color:#c9d6db;max-width:30em;margin:0 auto}
.platz .wm{color:#fff;font-size:clamp(28px,5vw,40px)}
.platz .slogan{font-size:clamp(14px,1.6vw,17px);letter-spacing:0.1em;color:var(--signal)}
.platz a{color:#fff}
.platz a:hover{color:var(--signal)}
.platz-fuss{font-size:15px;color:#9fb0b8;display:flex;flex-wrap:wrap;
  gap:8px 22px;justify-content:center}