/* Rechnungsportal – Gestaltung nach art-media.at (Stand 03.11.2026, aus der gesicherten Startseite abgelesen):
   Flächen in Salbei #89a7a1, Inhalt auf Weiß, Schrift Schwarz, Aktionsfarbe Beige #e4d3b9 mit schwarzem Rand,
   Überschriften ClashDisplay Semibold in Versalien, Fließtext Roboto. Schriften liegen unter fonts/ (holt portal.py deploy --holen
   von art-media.at); fehlen sie, greifen die Fallbacks. */
@font-face{font-family:"ClashDisplay";font-weight:600;font-display:swap;
  src:url(fonts/ClashDisplay-Semibold.woff2) format("woff2"),url(fonts/ClashDisplay-Semibold.woff) format("woff")}
@font-face{font-family:"ClashDisplay";font-weight:500;font-display:swap;
  src:url(fonts/ClashDisplay-Medium.woff2) format("woff2"),url(fonts/ClashDisplay-Medium.woff) format("woff")}
@font-face{font-family:"RobotoAM";font-weight:400;font-display:swap;src:url(fonts/Roboto-Regular.ttf) format("truetype")}
@font-face{font-family:"RobotoAM";font-weight:500;font-display:swap;src:url(fonts/Roboto-Medium.ttf) format("truetype")}
@font-face{font-family:"RobotoAM";font-weight:700;font-display:swap;src:url(fonts/Roboto-Bold.ttf) format("truetype")}

:root{
  --salbei:#89a7a1; --salbei-hell:#c3ccc8; --panel:#eef1ef; --weiss:#ffffff; --schwarz:#000000; --text:#1a1a1a; --grau:#5a625f;
  --linie:#a9b6b1; --beige:#e4d3b9; --beige-dunkel:#d6c09c; --ok:#2f6b4f; --ok-bg:#e3f3ea; --warn:#8a1f1f; --warn-bg:#fbe4e2;
  --display:"ClashDisplay","Archivo","Arial Black",Arial,sans-serif; --body:"RobotoAM",Roboto,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--text);font:16px/1.55 var(--body)}
.innen{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Kopf: Logo links, Titel rechts – wie die Navigationsleiste der Website */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:760px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-left,0px))}
.marke{display:inline-flex;align-items:center;line-height:0}
.marke img{height:48px;width:auto}
.kopf-titel{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--schwarz)}

/* Salbei-Bühne mit Versal-Überschrift */
.buehne{background:var(--salbei);color:var(--schwarz);padding:40px 0 44px}
h1{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.02;font-size:clamp(32px,7vw,52px);margin:0 0 14px;text-wrap:balance}
.lead{max-width:60ch;margin:0;font-size:17px}

main{padding:28px 0 40px}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:0 0 0 22px;padding:22px 22px 26px;margin:0 0 18px}
h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.02em;margin:18px 0 10px}
.karte > h2:first-child{margin-top:0}

label{display:block;margin:10px 0 0;font-weight:500;font-size:15px}
label small{font-weight:400;color:var(--grau)}
.zeile.zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.zeile.zwei{grid-template-columns:1fr}}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:11px 12px;border:1px solid var(--linie);border-radius:0;background:var(--panel);color:var(--text);font:16px var(--body);margin-top:6px}
input:focus,select:focus{outline:2px solid var(--schwarz);outline-offset:0;background:var(--weiss)}
select[multiple]{padding:6px}
select[multiple] option{padding:5px 8px}
input[type=file]{display:block;margin-top:8px;font:15px var(--body)}

/* Beiger Knopf mit schwarzem Rand – wie „Jetzt anfragen“ auf der Website */
.knopf{display:inline-block;margin-top:22px;background:var(--beige);color:var(--schwarz);border:2px solid var(--schwarz);border-radius:999px;
  padding:12px 26px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px;cursor:pointer;text-decoration:none}
.knopf:hover{background:var(--beige-dunkel)}
.knopf:focus-visible{outline:3px solid var(--salbei);outline-offset:2px}

.ok{background:var(--ok-bg);border-color:var(--ok)}
.ok h2{margin-top:0}
.fehler{background:var(--warn-bg);border-color:var(--warn);padding:12px 18px}
.fehler ul{margin:4px 0;padding-left:20px}
.hp{position:absolute;left:-9999px;top:-9999px}

.fuss{background:var(--salbei-hell);color:var(--text);font-size:14px;padding:22px 0 28px}
.fuss strong{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em}