/* ebiml3v2 — neue Start-/Login-Seite (Tobias 02.10.2026, AIPM2 Projekt 12).
   Eigenstaendig, bewusst OHNE main2.css: die Portal-Styles tragen Alt-Regeln
   fuer .navbar/.tab/.buttons, die hier nur stoeren wuerden. Farben folgen dem
   Portal (Bordeaux #bb1500 als Akzent, Grau, Weiss, Grund #f6f6f7). */
:root{
  --lp-rot: #bb1500;
  --lp-rot-dunkel: #7a1f1f;
  --lp-rot-hell: #fbeae7;
  --lp-orange: #e08a00;
  --lp-text: #1f1f1f;
  --lp-text-2: #303030;
  --lp-grau: #5e5e5e;
  --lp-grau-hell: #919191;
  --lp-linie: #e3e3e3;
  --lp-rahmen: #c6c6c6;
  --lp-grund: #f6f6f7;
  --lp-dunkel: #2a2a2e;
  --lp-fuss: #1b1b1e;
}
@font-face{
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf") format("truetype");
  font-weight: 300 800;
  font-display: swap; /* Text sofort mit Ersatzschrift zeigen, Open Sans tauscht nach */
}
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin: 0; }
body{ font-family: "Open Sans", system-ui, sans-serif; color: var(--lp-text); background: var(--lp-grund); line-height: 1.45; }
a{ color: var(--lp-rot); }
a:hover{ color: var(--lp-rot-dunkel); }
h1,h2,h3,p,ul{ margin: 0; }
.lp-wrap{ max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-eyebrow{ font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lp-btn{ display: inline-block; text-decoration: none; font-weight: 600; padding: 11px 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 16px; line-height: 1.3; }
.lp-btn-rot{ background: var(--lp-rot); color: #fff; border-color: var(--lp-rot); }
.lp-btn-rot:hover{ background: var(--lp-rot-dunkel); border-color: var(--lp-rot-dunkel); color: #fff; }
.lp-btn-orange{ background: var(--lp-orange); color: #fff; border-color: var(--lp-orange); }
.lp-btn-orange:hover{ background: #b86b00; border-color: #b86b00; color: #fff; }
.lp-btn-hell{ background: #fff; color: var(--lp-text-2); border-color: var(--lp-rahmen); }
.lp-btn-hell:hover{ border-color: var(--lp-grau); color: var(--lp-text); }
.lp-icon{ flex: none; }

/* Kopfzeile */
.lp-kopf{ background: #fff; border-bottom: 1px solid var(--lp-linie); }
.lp-kopf .lp-wrap{ padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lp-marke{ display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--lp-text); }
.lp-marke img{ height: 54px; width: auto; }
.lp-marke-text{ display: flex; flex-direction: column; line-height: 1.15; }
.lp-marke-name{ font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.lp-marke-name span{ color: var(--lp-rot); }
.lp-marke-sub{ font-size: 13px; color: var(--lp-grau); }
.lp-nav{ display: flex; align-items: center; gap: 28px; font-size: 15px; }
.lp-nav a:not(.lp-btn){ text-decoration: none; color: var(--lp-text-2); }
.lp-nav a:not(.lp-btn):hover{ color: var(--lp-rot); }
.lp-nav-tel{ color: var(--lp-grau); display: flex; align-items: center; gap: 6px; }

/* Hero */
.lp-hero{ position: relative; background: var(--lp-dunkel); color: #fff; overflow: hidden; }
.lp-hero-bild{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.lp-hero-schleier{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,22,.92) 0%, rgba(20,20,22,.72) 55%, rgba(20,20,22,.45) 100%); }
.lp-hero .lp-wrap{ position: relative; padding-top: 72px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; align-items: center; }
.lp-hero-text{ grid-column: span 7; display: flex; flex-direction: column; gap: 22px; }
.lp-hero-text .lp-eyebrow{ display: inline-flex; align-items: center; gap: 8px; color: #ffd9d2; }
.lp-hero-text .lp-eyebrow::before{ content: ""; width: 28px; height: 2px; background: #ff6a50; display: inline-block; }
.lp-hero h1{ font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -.015em; }
.lp-hero-lead{ font-size: 19px; line-height: 1.55; color: #e6e6e6; max-width: 580px; }
.lp-hero-punkte{ margin-top: 6px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 24px; font-size: 15px; color: #f2f2f2; }
.lp-hero-punkte li{ display: flex; gap: 10px; align-items: flex-start; }
.lp-hero-punkte svg{ margin-top: 2px; }

/* Login-Karte */
.lp-login{ grid-column: span 5; background: #fff; color: var(--lp-text); border-radius: 12px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; }
.lp-login h2{ font-size: 24px; font-weight: 700; }
.lp-login-sub{ font-size: 14px; color: var(--lp-grau); }
.lp-feld{ display: flex; flex-direction: column; gap: 6px; }
.lp-feld label{ font-size: 14px; font-weight: 600; color: var(--lp-text-2); }
.lp-input{ width: 100%; height: 46px; border: 1px solid var(--lp-rahmen); border-radius: 6px; padding: 0 12px; font: 16px "Open Sans", system-ui, sans-serif; color: var(--lp-text); background: #fff; }
.lp-input:focus{ outline: 2px solid var(--lp-rot); outline-offset: 1px; border-color: var(--lp-rot); }
.lp-login-zeile{ display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.lp-login-zeile label{ display: flex; align-items: center; gap: 8px; color: var(--lp-text-2); }
.lp-login-zeile input{ width: 16px; height: 16px; accent-color: var(--lp-rot); margin: 0; }
.lp-login-zeile a{ text-decoration: none; }
.lp-login .lp-btn{ height: 48px; width: 100%; }
.lp-login-fuss{ margin-top: 4px; font-size: 14px; color: var(--lp-grau); text-align: center; }
.lp-login-fuss a{ text-decoration: none; font-weight: 600; }
.lp-fehler{ background: #fdecea; border: 1px solid #f1b8b0; color: #8a1a0b; border-radius: 6px; padding: 10px 12px; font-size: 14px; }

/* Vertrauensband */
.lp-trust{ background: #fff; border-bottom: 1px solid var(--lp-linie); }
.lp-trust .lp-wrap{ padding-top: 22px; padding-bottom: 22px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; font-size: 15px; color: var(--lp-text-2); }
.lp-trust div{ display: flex; align-items: center; gap: 12px; }

/* Leistungen */
.lp-leistungen{ padding: 72px 0; }
.lp-leistungen .lp-wrap{ display: flex; flex-direction: column; gap: 36px; }
.lp-abschnitt-kopf{ display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.lp-abschnitt-kopf .lp-eyebrow{ color: var(--lp-rot); }
.lp-abschnitt-kopf h2{ font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.lp-abschnitt-kopf p{ font-size: 17px; line-height: 1.55; color: var(--lp-grau); }
.lp-karten{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.lp-karte{ background: #fff; border: 1px solid var(--lp-linie); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .2s; }
.lp-karte:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.lp-karte-icon{ width: 46px; height: 46px; border-radius: 10px; background: var(--lp-rot-hell); display: flex; align-items: center; justify-content: center; }
.lp-karte h3{ font-size: 19px; font-weight: 700; }
.lp-karte p{ font-size: 15px; line-height: 1.55; color: var(--lp-grau); }
.lp-extras{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; font-size: 15px; color: var(--lp-text-2); }
.lp-extras div{ display: flex; gap: 12px; align-items: flex-start; padding: 4px 0; }
.lp-extras svg{ margin-top: 1px; }

/* Purchase to Open */
.lp-p2o{ background: #fff; border-top: 1px solid var(--lp-linie); border-bottom: 1px solid var(--lp-linie); }
.lp-p2o .lp-wrap{ padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; align-items: center; }
.lp-p2o-logo{ grid-column: span 3; display: flex; justify-content: center; }
.lp-p2o-logo img{ width: 200px; height: 200px; border-radius: 16px; box-shadow: 0 12px 30px rgba(242,148,0,.3); }
.lp-p2o-text{ grid-column: span 9; display: flex; flex-direction: column; gap: 14px; }
.lp-p2o-text .lp-eyebrow{ color: #b86b00; }
.lp-p2o-text h2{ font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.lp-p2o-text h2 span{ color: var(--lp-orange); }
.lp-p2o-text p{ font-size: 17px; line-height: 1.55; color: var(--lp-grau); max-width: 760px; }
.lp-p2o-knoepfe{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* Partner */
.lp-partner{ padding: 56px 0; }
.lp-partner .lp-wrap{ display: flex; flex-direction: column; gap: 22px; align-items: center; }
.lp-partner .lp-eyebrow{ color: var(--lp-grau); }
.lp-logos{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 14px; width: 100%; }
.lp-logos li{ min-height: 72px; border: 1px solid var(--lp-linie); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px 12px; text-align: center; }
.lp-logos span{ font-size: 15px; font-weight: 600; color: var(--lp-text-2); line-height: 1.25; letter-spacing: -.005em; }
.lp-logos li{ min-height: 84px; transition: box-shadow .2s, border-color .2s; }
.lp-logos li:hover{ border-color: var(--lp-rahmen); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.lp-logos a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: inherit; }
.lp-logos img{ max-height: 52px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Kontakt */
.lp-kontakt{ background: var(--lp-dunkel); color: #fff; }
.lp-kontakt .lp-wrap{ padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; align-items: center; }
.lp-kontakt-text{ grid-column: span 7; display: flex; flex-direction: column; gap: 10px; }
.lp-kontakt-text h2{ font-size: 30px; font-weight: 700; }
.lp-kontakt-text p{ font-size: 17px; line-height: 1.55; color: #d6d6d6; }
.lp-kontakt-wege{ grid-column: span 5; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
.lp-kontakt-wege a{ display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 600; }
.lp-kontakt-wege a:hover{ color: #ffd9d2; }

/* Fuss */
.lp-fuss{ background: var(--lp-fuss); color: #bdbdbd; font-size: 14px; }
.lp-fuss-spalten{ padding-top: 40px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; }
.lp-fuss-spalten > div{ display: flex; flex-direction: column; gap: 8px; }
.lp-fuss-spalten b{ color: #fff; }
.lp-fuss-spalten a{ color: #bdbdbd; text-decoration: none; }
.lp-fuss-spalten a:hover{ color: #fff; }
.lp-fuss-marke{ font-size: 20px; font-weight: 700; color: #fff; }
.lp-fuss-marke span{ color: #ff6a50; }
.lp-fuss-unten{ border-top: 1px solid #333338; }
.lp-fuss-unten .lp-wrap{ padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #8f8f93; }

/* Mobil */
@media (max-width: 900px){
  .lp-hero .lp-wrap, .lp-p2o .lp-wrap, .lp-kontakt .lp-wrap{ grid-template-columns: 1fr; }
  .lp-hero-text, .lp-login, .lp-p2o-logo, .lp-p2o-text, .lp-kontakt-text, .lp-kontakt-wege{ grid-column: auto; }
  .lp-hero h1{ font-size: 36px; }
  .lp-karten, .lp-extras, .lp-trust .lp-wrap, .lp-fuss-spalten{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp-logos{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .lp-karten, .lp-extras, .lp-trust .lp-wrap, .lp-fuss-spalten, .lp-hero-punkte{ grid-template-columns: 1fr; }
  .lp-logos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp-nav a:not(.lp-btn), .lp-nav-tel{ display: none; }
  .lp-login{ padding: 24px; }
}

/* ---------- Legal-Seiten (Impressum, Kontakt, Anfahrt, AGB, Datenschutz, P2O) ---------- */
.lp-seite{ padding: 44px 0 72px; }
.lp-seite .lp-wrap{ max-width: 960px; }
.lp-brotkrumen{ font-size: 14px; color: var(--lp-grau); margin-bottom: 14px; }
.lp-brotkrumen a{ text-decoration: none; }
.lp-seite h1{ font-size: 36px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 22px; }
.lp-doku{ background: #fff; border: 1px solid var(--lp-linie); border-radius: 10px; padding: 36px 40px; font-size: 16px; line-height: 1.6; color: var(--lp-text-2); }
.lp-doku h2{ font-size: 22px; font-weight: 700; color: var(--lp-text); margin: 32px 0 12px; }
.lp-doku h2:first-child, .lp-doku .lp-spalten h2:first-child{ margin-top: 0; }
.lp-doku h3{ font-size: 17px; font-weight: 700; color: var(--lp-text); margin: 20px 0 8px; }
.lp-doku p{ margin: 0 0 14px; }
.lp-doku ul, .lp-doku ol{ margin: 0 0 14px; padding-left: 22px; }
.lp-doku li{ margin-bottom: 6px; }
.lp-doku .lp-glossar{ list-style: none; padding-left: 0; }
.lp-doku .lp-glossar > li{ margin-bottom: 16px; }
.lp-doku .lp-glossar > li > h3{ margin-top: 0; }
.lp-doku small{ display: block; font-size: 14px; color: var(--lp-grau); margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--lp-linie); }
.lp-doku small p{ margin-bottom: 8px; }
.lp-doku a{ text-decoration: none; font-weight: 600; }
.lp-doku a:hover{ text-decoration: underline; }
.lp-doku a .lp-icon{ vertical-align: -2px; }
.lp-doku img{ max-width: 100%; height: auto; }
.lp-doku .lp-btn{ text-decoration: none; }
.lp-doku .lp-btn:hover{ text-decoration: none; }
.lp-doku .lp-btn .lp-icon{ vertical-align: -1px; margin-left: 4px; }
.lp-hinweis{ background: var(--lp-grund); border-left: 3px solid var(--lp-rot); padding: 14px 18px; border-radius: 6px; margin: 0 0 20px; }
.lp-spalten{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.lp-adresse{ font-style: normal; line-height: 1.7; }
.lp-tabelle{ width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 8px; }
.lp-tabelle th{ text-align: left; font-weight: 600; color: var(--lp-grau); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 2px solid var(--lp-linie); }
.lp-tabelle td{ padding: 10px; border-bottom: 1px solid var(--lp-linie); vertical-align: top; }
.lp-tabelle tr:last-child td{ border-bottom: none; }
/* Kontaktseite: alle Tabellen mit denselben Spaltenbreiten -> senkrechte Flucht */
.lp-kontakt-tabelle{ table-layout: fixed; }
.lp-kontakt-tabelle .sp-name{ width: 42%; }
.lp-kontakt-tabelle .sp-tel{ width: 26%; }
.lp-kontakt-tabelle .sp-mail{ width: 32%; }
.lp-kontakt-tabelle td{ overflow-wrap: anywhere; }
.lp-kontakt-tabelle td:nth-child(2){ font-weight: 700; }  /* Telefonnummern fett (Tobias 02.10.2026) */
@media (max-width: 700px){
  .lp-spalten{ grid-template-columns: 1fr; }
  .lp-doku{ padding: 24px 18px; }
  .lp-seite h1{ font-size: 30px; }
  .lp-tabelle th:nth-child(2), .lp-tabelle td:nth-child(2){ white-space: normal !important; }
  .lp-tabelle{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lp-kontakt-tabelle{ display: table; table-layout: auto; }  /* 4 Spalten passen nicht in 390px: seitlich scrollen statt abschneiden */
}

/* Kopf-Button "Anmelden" auf der Startseite nur mobil: am Desktop steht das Login-Formular direkt im Hero. */
@media (min-width: 901px){
  .lp-nav .lp-btn-start{ display: none; }
}