/*
Theme Name:   EuP Portal
Theme URI:    https://entwicklung-produktion.de/
Author:       EuP Entwicklung und Produktion UG (haftungsbeschränkt)
Description:  Theme für das EuP-Kundenportal (EMS-Geräte und -Westen). Darstellung über CSS-Variablen (assets/css/variablen.css); Farben, Schriften, Logo, Website-Icon, Texte und E-Mail-Rahmen aus dem CI-Ordner (wp-content/eup-ci). Liefert die Bausteine (Knöpfe, Karten, Hinweise, Felder, Tabellen, Status, Kennzahlen, Balken, Reiter …) für alle Plugins eup-portal-*.
Version:      0.3.2
Requires at least: 6.4
Requires PHP: 8.1
License:      Proprietär
Text Domain:  eup-portal
*/

/* -------- Grundlagen -------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--eup-schrift-grund);color:var(--eup-text);background:var(--eup-hintergrund-seite);font-size:16px;line-height:1.6}
h1,h2,h3,h4{font-family:var(--eup-schrift-kopf);font-weight:500;margin:0 0 .4em;letter-spacing:.2px;line-height:1.15}
h1{font-size:clamp(28px,4vw,38px)}h2{font-size:26px}h3{font-size:19px}
a{color:var(--eup-primaer);text-decoration:none}
a:hover{color:var(--eup-primaer-dunkel)}
img{max-width:100%;height:auto}
.eup-wrap{max-width:var(--eup-inhaltsbreite);margin:0 auto;padding:0 28px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;clip:auto;width:auto;height:auto;padding:8px 12px;background:var(--eup-hintergrund)}

/* -------- Kopf -------- */
.eup-kopf{background:var(--eup-buehne);color:var(--eup-auf-buehne);position:relative;z-index:10}
.eup-kopf .eup-wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.eup-logo{display:flex;align-items:center;gap:10px;font-family:var(--eup-schrift-kopf);font-size:18px;letter-spacing:.3px;color:var(--eup-auf-buehne);white-space:nowrap}
.eup-logo:hover{color:var(--eup-auf-buehne)}
.eup-logo img{max-height:40px;width:auto}
.eup-nav{flex:1}
.eup-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.eup-nav a{display:block;color:var(--eup-buehne-text2);font-family:var(--eup-schrift-kopf);font-size:15px;letter-spacing:.5px;text-transform:uppercase;padding:8px 12px;border-radius:var(--eup-radius-knopf)}
.eup-nav a:hover{color:var(--eup-auf-buehne)}
.eup-nav .current-menu-item>a,.eup-nav .current_page_item>a{color:var(--eup-auf-buehne);background:var(--eup-nav-aktiv)}
.eup-kopf-rechts{display:flex;align-items:center;gap:26px}
.eup-sprachen{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.eup-sprachen a{display:block;color:var(--eup-buehne-text3);font-size:12px;padding:3px 6px;border:1px solid transparent;border-radius:4px;text-transform:uppercase}
.eup-sprachen .aktiv a{border-color:var(--eup-linie-auf-buehne);color:var(--eup-auf-buehne)}
.eup-kopf-link{color:var(--eup-auf-buehne);font-size:14px;position:relative}
.eup-kopf-link:hover{color:var(--eup-akzent-auf-dunkel)}
.eup-badge{position:absolute;top:-8px;right:-14px;background:var(--eup-primaer);color:var(--eup-auf-primaer);font-size:11px;border-radius:999px;padding:0 6px;line-height:18px}
.eup-burger{display:none;background:none;border:1px solid var(--eup-linie-auf-buehne);color:var(--eup-auf-buehne);border-radius:var(--eup-radius-knopf);padding:4px 10px;cursor:pointer;font:inherit;font-size:14px}

/* -------- Knöpfe -------- */
.eup-btn,.button,button.button,input[type=submit],.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{
  font-family:var(--eup-schrift-kopf);font-weight:500;letter-spacing:.7px;text-transform:uppercase;font-size:15px;line-height:1.2;
  border-radius:var(--eup-radius-knopf);padding:13px 26px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--eup-primaer);color:var(--eup-auf-primaer);box-shadow:var(--eup-knopf-schatten);text-decoration:none}
.eup-btn:hover,.button:hover,input[type=submit]:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--eup-primaer-hover);color:var(--eup-auf-primaer)}
.eup-btn--neben{background:var(--eup-hintergrund);color:var(--eup-primaer);border:1.5px solid var(--eup-primaer);box-shadow:none}
.eup-btn--neben:hover{background:var(--eup-primaer-hell);color:var(--eup-primaer)}
.eup-btn--klein{padding:8px 14px;font-size:13px}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--eup-primaer);color:var(--eup-auf-primaer)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--eup-primaer-hover)}

/* -------- Inhalt -------- */
.eup-main{min-height:60vh;padding:36px 0 56px}
.eup-eyebrow{font-family:var(--eup-schrift-kopf);font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--eup-primaer);font-size:13px;margin-bottom:8px}
.eup-lead{color:var(--eup-text-zweitrangig);font-size:17px;max-width:60ch;margin:0 0 24px}
.eup-karte{background:var(--eup-hintergrund);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:22px}
.eup-inhalt{background:var(--eup-hintergrund);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:28px}
.eup-raster{display:grid;gap:18px}
.eup-raster--4{grid-template-columns:repeat(4,1fr)}
.eup-raster--2{grid-template-columns:repeat(2,1fr)}
.eup-kachel{display:block;color:var(--eup-text);transition:border-color .15s,box-shadow .15s}
.eup-kachel:hover{color:var(--eup-text);border-color:var(--eup-primaer);box-shadow:0 0 0 3px var(--eup-primaer-hell)}
.eup-kachel__sym{width:42px;height:42px;border-radius:var(--eup-radius-karte);background:var(--eup-primaer-hell);color:var(--eup-primaer);display:grid;place-items:center;font-family:var(--eup-schrift-kopf);font-size:20px;margin-bottom:12px}
.eup-kachel p{color:var(--eup-text-zweitrangig);font-size:14px;margin:0}
.eup-hinweis{background:var(--eup-primaer-hell);border:1px solid var(--eup-primaer-hell-rahmen);color:var(--eup-primaer-hell-text);border-radius:var(--eup-radius-feld);padding:12px 16px;font-size:14px}
.eup-platzhalter{color:var(--eup-text-zweitrangig);font-style:italic}
.eup-abschnitt{margin-top:40px}

/* Formulare (WordPress, WooCommerce) */
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea,.woocommerce form .form-row .input-text,.woocommerce form .form-row select{
  width:100%;padding:11px 13px;font-size:15px;font-family:var(--eup-schrift-grund);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-feld);background:var(--eup-hintergrund);color:var(--eup-text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--eup-primaer);box-shadow:0 0 0 3px var(--eup-primaer-hell)}
label{font-weight:600;font-size:14px}
input[type=checkbox],input[type=radio]{accent-color:var(--eup-primaer);width:auto}

/* Tabellen */
.eup-inhalt table,.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-size:14px;border:none;border-radius:0}
.eup-inhalt th,.woocommerce table.shop_table th{text-align:left;font-family:var(--eup-schrift-kopf);font-weight:500;letter-spacing:.4px;color:var(--eup-text-zweitrangig);border-bottom:1px solid var(--eup-rahmen);padding:8px 10px}
.eup-inhalt td,.woocommerce table.shop_table td{border-bottom:1px solid var(--eup-rahmen);padding:10px;border-top:none}

/* WooCommerce */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{background:var(--eup-hintergrund);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--eup-schrift-kopf);font-weight:500;font-size:17px}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{color:var(--eup-text);font-family:var(--eup-schrift-kopf);font-size:20px}
.woocommerce-message,.woocommerce-info{border-top-color:var(--eup-primaer)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--eup-primaer)}
.woocommerce-error{border-top-color:var(--eup-fehler)}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);background:var(--eup-hintergrund);overflow:hidden}
.woocommerce-MyAccount-navigation li a{display:block;padding:10px 16px;color:var(--eup-text);border-bottom:1px solid var(--eup-rahmen)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--eup-primaer-hell);color:var(--eup-primaer-hell-text)}

/* -------- Bausteine für die Plugins eup-portal-* --------
 * Die Plugins gestalten nichts selbst: Aussehen nur über diese Klassen und die
 * Variablen; im Plugin-CSS stehen nur Anordnung und Abstände.
 */
.eup-seite{width:100%}
.eup-titel{font-family:var(--eup-schrift-kopf);font-weight:500;font-size:19px;line-height:1.2;letter-spacing:.2px;margin:0 0 4px;color:var(--eup-text)}
.eup-titel--gross{font-size:22px}
.eup-text-klein{font-size:14px;color:var(--eup-text-zweitrangig)}
.eup-text-fein{font-size:13px;color:var(--eup-text-zweitrangig)}
.eup-leer{color:var(--eup-text-zweitrangig);font-style:italic}
.eup-eyebrow--grau{color:var(--eup-text-zweitrangig);font-size:12px;letter-spacing:1.8px}
.eup-link{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--eup-primaer);cursor:pointer;text-decoration:none}
.eup-link:hover{color:var(--eup-primaer-dunkel)}
.eup-btn--breit{width:100%;justify-content:center}
.eup-btn:disabled,.eup-btn[disabled]{background:var(--eup-text-zweitrangig);box-shadow:none;cursor:default}
.eup-knopfreihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.eup-trenner{border:none;border-top:1px solid var(--eup-rahmen);margin:28px 0 22px}
.eup-warnung{background:var(--eup-warnung-flaeche);border:1px solid var(--eup-warnung-rahmen);color:var(--eup-warnung-text);border-radius:var(--eup-radius-feld);padding:12px 16px;font-size:14px}
.eup-meldung{border-radius:var(--eup-radius-feld);padding:12px 16px;font-size:14px;margin:0 0 18px;border:1px solid}
.eup-meldung--fehler{background:var(--eup-fehler-flaeche);color:var(--eup-fehler);border-color:var(--eup-fehler)}
.eup-meldung--ok{background:var(--eup-ok-flaeche);color:var(--eup-ok);border-color:var(--eup-ok)}
.eup-textfarbe--ok{color:var(--eup-ok)}
.eup-textfarbe--fehler{color:var(--eup-fehler)}
.eup-kasten{background:var(--eup-hintergrund-seite);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-feld);padding:14px 16px;font-size:14px}
.eup-box{border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:16px 18px;background:var(--eup-hintergrund)}
.eup-status{display:inline-block;font-size:13px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap;background:var(--eup-hintergrund-seite);color:var(--eup-text-zweitrangig)}
.eup-status--ok{background:var(--eup-ok-flaeche);color:var(--eup-ok)}
.eup-status--info{background:var(--eup-primaer-hell);color:var(--eup-primaer-hell-text)}
.eup-status--fehler{background:var(--eup-fehler-flaeche);color:var(--eup-fehler)}
.eup-sym{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--eup-primaer-hell);color:var(--eup-primaer)}
.eup-sym svg{width:30px;height:30px}
.eup-sym--klein{width:56px;height:56px}
.eup-sym--klein svg{width:26px;height:26px}
.eup-sym--ok{background:var(--eup-ok-flaeche);color:var(--eup-ok)}
.eup-sym--fehler{background:var(--eup-fehler-flaeche);color:var(--eup-fehler)}
.eup-sym--eckig{border-radius:var(--eup-radius-karte);width:42px;height:42px}
.eup-sym--eckig svg{width:20px;height:20px}
.eup-sym--voll{background:var(--eup-primaer);color:var(--eup-auf-primaer)}
.eup-feld{display:grid;gap:6px;margin:0 0 14px}
.eup-feld--fehler input,.eup-feld--fehler select,.eup-feld--fehler textarea{border-color:var(--eup-fehler)}
.eup-feldfehler{display:block;color:var(--eup-fehler);font-size:13px}
.eup-optional{font-weight:400;color:var(--eup-text-zweitrangig)}
.eup-zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;cursor:pointer}
.eup-zustimmung small{display:block;font-size:13px;color:var(--eup-text-zweitrangig)}
.eup-auswahl{position:relative;display:grid;gap:4px;border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:16px 18px;background:var(--eup-hintergrund);color:var(--eup-text);cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,box-shadow .15s}
.eup-auswahl:hover,.eup-auswahl:focus-visible{border-color:var(--eup-primaer);outline:none}
.eup-auswahl:has(input:checked),.eup-auswahl--aktiv{border-color:var(--eup-primaer);box-shadow:0 0 0 3px var(--eup-primaer-hell)}
.eup-auswahl:has(input:focus-visible){outline:2px solid var(--eup-primaer);outline-offset:2px}
.eup-auswahl input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.eup-auswahl__titel{font-family:var(--eup-schrift-kopf);font-size:17px;font-weight:500;line-height:1.2}
.eup-auswahl__text{font-size:13px;color:var(--eup-text-zweitrangig)}
.eup-tabelle-box{overflow-x:auto}
.eup-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.eup-tabelle th{text-align:left;font-family:var(--eup-schrift-kopf);font-weight:500;letter-spacing:.4px;color:var(--eup-text-zweitrangig);border-bottom:1px solid var(--eup-rahmen);padding:8px 10px}
.eup-tabelle td{border-bottom:1px solid var(--eup-rahmen);padding:10px;vertical-align:top}
.eup-daten{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 18px;margin:0}
.eup-daten dt{color:var(--eup-text-zweitrangig)}
.eup-daten dd{margin:0}
.eup-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;color:var(--eup-text)}
.eup-qr{border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-feld);padding:8px;background:var(--eup-hintergrund)}
.eup-tabelle .eup-zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.eup-tabelle tfoot td{font-weight:600;border-bottom:none;border-top:1.5px solid var(--eup-rahmen)}

/* -------- Auswertung: Kennzahlen, Balken, Reiter -------- */
.eup-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.eup-kennzahl{background:var(--eup-hintergrund);border:1px solid var(--eup-rahmen);border-radius:var(--eup-radius-karte);padding:16px 18px;min-width:0}
.eup-kennzahl--hervor{border-color:var(--eup-primaer);box-shadow:0 0 0 3px var(--eup-primaer-hell)}
.eup-kennzahl__titel{font-family:var(--eup-schrift-kopf);font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--eup-text-zweitrangig);overflow-wrap:anywhere}
.eup-kennzahl__wert{font-family:var(--eup-schrift-kopf);font-size:30px;font-weight:500;line-height:1.2;margin-top:4px;font-variant-numeric:tabular-nums}
.eup-kennzahl__zusatz{font-size:12.5px;color:var(--eup-text-zweitrangig)}
.eup-balken{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.eup-balken li{display:grid;grid-template-columns:minmax(90px,170px) 1fr minmax(48px,auto);gap:10px;align-items:center;font-size:14px}
.eup-balken__spur{height:12px;background:var(--eup-primaer-hell);border-radius:999px;overflow:hidden}
.eup-balken__fuellung{display:block;height:100%;background:var(--eup-primaer);border-radius:999px}
.eup-balken__zahl{text-align:right;font-variant-numeric:tabular-nums;color:var(--eup-text-zweitrangig)}
.eup-reiter{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--eup-rahmen);margin:0;padding:0;list-style:none}
.eup-reiter a{display:block;padding:11px 14px;font-family:var(--eup-schrift-kopf);font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:var(--eup-text-zweitrangig);border-bottom:3px solid transparent;white-space:nowrap}
.eup-reiter a:hover{color:var(--eup-text)}
.eup-reiter a[aria-current="page"]{color:var(--eup-text);border-bottom-color:var(--eup-primaer)}
@media print{
  .eup-kopf,.eup-fuss,.eup-reiter,.eup-druck-aus{display:none!important}
  body{background:#fff}
  .eup-karte,.eup-kennzahl{break-inside:avoid}
}
@media(max-width:560px){.eup-daten{grid-template-columns:1fr}}

/* -------- Anmeldeseite -------- */
.eup-anmeldung{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 68px)}
.eup-anmeldung__buehne{background:linear-gradient(180deg,var(--eup-buehne-oben),var(--eup-buehne));color:var(--eup-auf-buehne);padding:60px;display:flex;flex-direction:column;justify-content:center}
.eup-anmeldung__buehne h1{color:var(--eup-auf-buehne);font-size:clamp(34px,4vw,46px);font-weight:600}
.eup-anmeldung__buehne h1 b{color:var(--eup-primaer);font-weight:600}
.eup-anmeldung__buehne p{color:var(--eup-buehne-text2);max-width:46ch}
.eup-anmeldung__buehne .eup-eyebrow{color:var(--eup-akzent-auf-dunkel)}
.eup-anmeldung__formular{background:var(--eup-hintergrund);padding:40px;display:flex;align-items:center;justify-content:center}
.eup-anmeldung__formular>div{width:100%;max-width:420px}
.eup-anmeldung__formular .woocommerce>h2{display:none}

/* -------- Fuß -------- */
.eup-fuss{background:var(--eup-fusszeile);color:var(--eup-fusszeile-text);font-size:13px;padding:26px 0}
.eup-fuss .eup-wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.eup-fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.eup-fuss a{color:var(--eup-fusszeile-link)}
.eup-fuss__zusatz{font-size:12px;margin-top:4px;max-width:640px}
.eup-fuss a:hover{color:var(--eup-auf-buehne)}

/* -------- Schmale Bildschirme -------- */
@media(max-width:900px){
  .eup-raster--4{grid-template-columns:1fr 1fr}
  .eup-anmeldung{grid-template-columns:1fr}
  .eup-anmeldung__buehne{padding:40px 28px}
  .eup-burger{display:block}
  .eup-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--eup-buehne);padding:10px 20px}
  .eup-nav.offen{display:block}
  .eup-nav ul{flex-direction:column}
  .eup-sprachen{display:none}
}
@media(max-width:560px){
  .eup-raster--4,.eup-raster--2{grid-template-columns:1fr}
  .eup-wrap{padding:0 16px}
  .eup-logo img+span{display:none}
}