/* EP-Data — gemeinsames Stylesheet fuer index.html, preise.html, kontakt.html
   Fassung 1.5.0 (08.10.2026): Inhaltsseiten mittig - .seite (Preise, Kontakt, Vorfuehrung) steht auf
   breiten Bildschirmen in der Mitte statt am linken Rand (margin 0 auto).
   1.4.0 (02.10.2026): Kachel mit Knopf (.kachel.mitknopf): "Demofahrt starten" in der Kachel
   EP-Alltagsbegleiter, die Kachel selbst fuehrt weiter zu den Preisen.
   1.3.0 (02.10.2026): Umschalter Privat / Firma fuer die Preise (.preisschalter,
   .nur-b = nur brutto, .nur-n = nur netto; html.firma zeigt netto), Preiskarte einzeln (.pakete.eins).
   1.2.0 (01.10.2026): Preisblock EP-Alltagsbegleiter (Pakete, Test, Fragen), Kachel als Link.
   1.1.0 (01.10.2026): Knopf "Anmelden" im Kopf.
   1.0.0 (04.09.2026). Keine externen Ressourcen: Schrift liegt in assets/. */

@font-face{font-family:'EPD';src:url(assets/preg.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EPD';src:url(assets/pmed.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'EPD';src:url(assets/pbold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --navy:#0F284E; --blau:#115FAD; --hell:#6090C0; --blass:#A8C0D8;
  --tinte:#12203A; --grau:#5D6E88; --linie:#E4E9F0; --sand:#F6F8FB;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tinte);
     font:15px/1.6 'EPD',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:18px 44px;border-bottom:1px solid var(--linie);flex-wrap:wrap;
      position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:20}
.lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.lockup img{height:34px;width:auto;display:block}
.lockup .wort{font-size:19.5px;font-weight:700;letter-spacing:-.015em;color:var(--navy);line-height:1}
.lockup .wort i{font-style:normal;color:var(--blau)}
.lockup .wort s{display:block;text-decoration:none;font-size:9px;font-weight:500;
                letter-spacing:.11em;text-transform:uppercase;color:var(--grau);margin-top:3px;white-space:nowrap}
.nav{display:flex;gap:28px;align-items:center;font-size:13.5px;color:var(--grau);flex-wrap:wrap}
.nav a{text-decoration:none}
.nav a:hover{color:var(--blau)}
.nav a.an{color:var(--navy);font-weight:500}
.nav a.knopf{background:var(--navy);color:#fff;padding:9px 18px;border-radius:6px;
             font-size:13px;font-weight:500}
.nav a.knopf:hover{background:#0a3763;color:#fff}
.nav a.anmelden{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-weight:500;font-size:13px;
                border:1px solid var(--navy);padding:8px 15px;border-radius:6px;margin-right:-14px}
.nav a.anmelden svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav a.anmelden:hover{background:var(--sand);color:var(--navy)}

/* ---------- Einstieg ---------- */
.held{padding:74px 44px 56px;max-width:820px}
.auge{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blau);
      font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.auge::after{content:"";height:1px;width:56px;background:var(--blass)}
.held h1{font-size:46px;line-height:1.14;font-weight:500;letter-spacing:-.02em;margin:0 0 22px}
.held h1 em{font-style:normal;color:var(--blau)}
.held p{font-size:16.5px;line-height:1.72;color:var(--grau);margin:0 0 32px;max-width:620px}
.tasten{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.t1{background:var(--navy);color:#fff;padding:13px 26px;border-radius:7px;
    text-decoration:none;font-size:14px;font-weight:500;display:inline-block}
.t1:hover{background:#0a3763}
.t2{border:1px solid var(--linie);color:var(--tinte);padding:12px 24px;border-radius:7px;
    text-decoration:none;font-size:14px;display:inline-block}
.t2:hover{background:var(--sand)}

.zahlen{display:flex;gap:52px;padding:0 44px 56px;flex-wrap:wrap}
.zahlen div b{display:block;font-size:27px;font-weight:500;color:var(--navy);letter-spacing:-.01em}
.zahlen div span{font-size:12.5px;color:var(--grau)}

/* ---------- Katalog ---------- */
.kat{border-top:1px solid var(--linie);background:var(--sand);padding:52px 44px 60px}
.kat.weiss{background:#fff}
.katkopf{display:flex;align-items:flex-end;justify-content:space-between;
         margin-bottom:26px;gap:16px;flex-wrap:wrap}
.katkopf h2{margin:0;font-size:22px;font-weight:500;letter-spacing:-.01em}
.katkopf span{font-size:12.5px;color:var(--grau)}
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kachel{position:relative;background:#fff;border:1px solid var(--linie);border-radius:10px;
        padding:18px 16px 16px;transition:.18s}
.kachel:hover{border-color:var(--blass);box-shadow:0 12px 24px -18px rgba(15,40,78,.45);
              transform:translateY(-2px)}
.kachel svg{width:26px;height:26px;stroke:var(--navy);stroke-width:1.5;fill:none;
            stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;display:block}
.kachel b{display:block;font-size:14px;font-weight:500;margin-bottom:4px}
.kachel span{display:block;font-size:12.3px;line-height:1.5;color:var(--grau)}
.kachel .frei{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:500;
              color:#0E7C55;background:#EAF6F0;border-radius:999px;padding:3px 9px}
.pruefhinweis{margin:20px 0 0;font-size:12.5px;color:var(--grau)}
.pruefhinweis a{color:var(--blau);text-decoration:none;border-bottom:1px solid #C9DBEE}

/* ---------- Abschnitt Seit 2002 ---------- */
.hist{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(210px,.6fr);
      gap:38px;align-items:center}
.hist h2{margin:0 0 14px;font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.hist p{margin:0 0 12px;color:var(--grau);font-size:14.5px;line-height:1.72;max-width:56ch}
.hist .zitat{border-left:3px solid var(--blass);padding:2px 0 2px 16px;margin:18px 0 0;
             color:var(--tinte);font-size:14px;line-height:1.65}
.hist .zitat b{display:block;font-size:12px;color:var(--grau);font-weight:500;
               margin-top:6px;letter-spacing:.02em}
.hist figure{margin:0;text-align:center}
.hist .zwei{display:flex;justify-content:center;align-items:center}
.hist img{width:152px;border-radius:3px;box-shadow:0 16px 34px -14px rgba(15,40,78,.55)}
.hist .zwei img:first-child{transform:rotate(-5deg) translateX(12px);z-index:2;position:relative}
.hist .zwei img:last-child{transform:rotate(4deg) translateX(-12px)}
.hist figcaption{margin-top:14px;font-size:11.5px;color:var(--grau);line-height:1.5}

/* ---------- Preistafel ---------- */
.seite{padding:52px 44px 60px;max-width:1000px;margin:0 auto}
.seite h1{font-size:34px;font-weight:500;letter-spacing:-.02em;margin:0 0 14px}
.seite p.vor{color:var(--grau);font-size:15.5px;line-height:1.7;max-width:60ch;margin:0 0 30px}
table.preise{border-collapse:collapse;width:100%;margin-bottom:34px}
table.preise caption{text-align:left;font-size:13px;font-weight:600;color:var(--navy);
                     padding:0 0 10px;letter-spacing:.02em}
table.preise th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
                color:var(--grau);font-weight:500;padding:8px 12px;border-bottom:1px solid var(--linie)}
table.preise td{padding:12px;border-bottom:1px solid var(--linie);font-size:14px;vertical-align:top}
table.preise td.app b{display:block;font-weight:500}
table.preise td.app span{display:block;font-size:12.3px;color:var(--grau);line-height:1.5}
table.preise td.preis{text-align:right;white-space:nowrap;color:var(--grau);font-size:13.5px}
table.preise td.preis strong{color:var(--navy);font-size:16px;font-weight:500}
.hinweiskasten{border-left:3px solid var(--blass);background:var(--sand);padding:14px 18px;
               border-radius:0 8px 8px 0;font-size:13.5px;color:var(--grau);margin:0 0 30px;max-width:70ch}
.hinweiskasten b{color:var(--tinte);font-weight:500}

/* ---------- 1.2.0: Preisblock einer App ---------- */
.appblock{border:1px solid var(--linie);border-radius:14px;padding:28px 28px 22px;margin:0 0 40px;background:#fff}
.appkopf{display:flex;gap:18px;align-items:flex-start;margin-bottom:24px}
.appkopf img{width:64px;height:64px;border-radius:14px;flex:0 0 auto}
.appkopf h2{margin:2px 0 6px;font-size:24px;font-weight:500;letter-spacing:-.01em;color:var(--navy)}
.appkopf p{margin:0;color:var(--grau);font-size:14.5px;line-height:1.65;max-width:62ch}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 12px}
.paket{border:1px solid var(--linie);border-radius:12px;padding:20px 20px 16px;background:#fff}
.paket.mitte{border-color:var(--navy);box-shadow:0 14px 28px -22px rgba(15,40,78,.6)}
.paket h3{margin:0;font-size:15px;font-weight:600;color:var(--navy)}
.paket .zug{font-size:12.5px;color:var(--grau);margin-top:2px}
.paket .betrag{font-size:34px;font-weight:500;color:var(--navy);letter-spacing:-.02em;margin:14px 0 0;line-height:1.1}
.paket .betrag small{font-size:13px;color:var(--grau);font-weight:400;letter-spacing:0}
.paket .jahr{font-size:12px;color:var(--grau);margin-top:4px}
.paket p{font-size:13px;color:var(--tinte);margin:12px 0 0;line-height:1.55}
.kleintext{font-size:12.5px;color:var(--grau);margin:0 0 22px;max-width:80ch;line-height:1.6}
.testbox{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
         background:var(--sand);border-left:3px solid var(--blau);border-radius:0 10px 10px 0;padding:16px 20px;margin:0 0 28px}
.testbox b{display:block;font-size:16px;font-weight:500;color:var(--navy);margin-bottom:3px}
.testbox span{display:block;font-size:13.5px;color:var(--grau);max-width:60ch;line-height:1.6}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:10px 34px}
.appblock h3{font-size:14px;font-weight:600;color:var(--navy);margin:6px 0 10px;letter-spacing:.01em}
ul.haken{list-style:none;padding:0;margin:0 0 22px}
ul.haken li{position:relative;padding:0 0 0 24px;margin:0 0 8px;font-size:13.8px;line-height:1.55}
ul.haken li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:5px;
                    border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);transform:rotate(-45deg)}
.faq{border-top:1px solid var(--linie);margin-bottom:6px}
.faq details{border-bottom:1px solid var(--linie);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:13px 30px 13px 0;font-size:14.5px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:20px;color:var(--blau);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 14px;font-size:14px;color:var(--grau);line-height:1.65;max-width:75ch}
.faq a,.testbox a.t2{color:var(--blau)}
a.kachel{display:block;text-decoration:none;color:inherit}
.kachel .preisab{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:500;
                 color:var(--navy);background:#EAF1FA;border-radius:999px;padding:3px 9px}
table.preise td.app a{color:inherit;text-decoration:none}
table.preise td.preis a{color:var(--navy);text-decoration:none}

/* ---------- 1.3.0: Privat (brutto) / Firma (netto) ---------- */
html:not(.firma) .nur-n{display:none!important}
html.firma .nur-b{display:none!important}
.preisschalter{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 26px;font-size:13px;color:var(--grau)}
html.js .preisschalter{display:flex}
.preisschalter .gruppe{display:inline-flex;border:1px solid var(--linie);border-radius:999px;padding:3px;background:var(--sand)}
.preisschalter button{font:inherit;font-size:13px;border:0;background:transparent;color:var(--grau);padding:6px 14px;border-radius:999px;cursor:pointer}
.preisschalter button.an{background:var(--navy);color:#fff}
.preisschalter .erkl{font-size:12.5px}
.paket .zweit{font-size:12px;color:var(--grau);margin-top:2px}
.pakete.eins{grid-template-columns:minmax(0,340px)}
.katkopf .rechts{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.katkopf .preisschalter{margin:0}

/* ---------- Kontakt ---------- */
.kontaktraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:34px}
.kkarte{border:1px solid var(--linie);border-radius:10px;padding:20px}
.kkarte b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
          color:var(--grau);font-weight:500;margin-bottom:8px}
.kkarte a,.kkarte span{font-size:16px;color:var(--navy);text-decoration:none;line-height:1.6}
.kkarte a:hover{text-decoration:underline}

/* ---------- Fuss ---------- */
.fuss{padding:22px 44px;font-size:12px;color:var(--grau);display:flex;
      justify-content:space-between;gap:16px;border-top:1px solid var(--linie);flex-wrap:wrap}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--blau)}

@media (max-width:900px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .hist{grid-template-columns:1fr;gap:26px}
  .hist figure{order:-1}
  .held h1{font-size:32px}
  .kopf,.held,.kat,.zahlen,.fuss,.seite{padding-left:20px;padding-right:20px}
  .held{padding-top:48px}
}
@media (max-width:760px){
  .pakete,.zweispaltig{grid-template-columns:1fr}
  .appblock{padding:20px 16px 14px}
  .appkopf img{width:48px;height:48px}
}
@media (max-width:560px){
  .nav{gap:14px 20px}
  .nav a.anmelden{margin-right:0}
  .raster{grid-template-columns:1fr}
  .zahlen{gap:26px}
}

/* ---------- 1.4.0: Kachel mit Knopf (Demofahrt) ---------- */
.kachel.mitknopf{display:flex;flex-direction:column;align-items:flex-start}
.kachel.mitknopf form.demo{position:relative;z-index:1;margin:12px 0 0}
.kachel.mitknopf form.demo button{font:inherit;font-size:13px;font-weight:500;background:var(--navy);color:#fff;
  border:0;border-radius:6px;padding:8px 14px;cursor:pointer}
.kachel.mitknopf form.demo button:hover{background:#0a3763}
.kachel.mitknopf .demohinweis{font-size:11.5px;margin-top:5px}
.kachel.mitknopf a.mehr{margin-top:10px;font-size:12.3px;color:var(--blau);text-decoration:none}
.kachel.mitknopf a.mehr::after{content:"";position:absolute;inset:0;border-radius:10px}