/* Vaiacon Kundenbereich - warme Marke (Creme/Terracotta), Quicksand lokal */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/_vaiacon/statisch/quicksand-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/_vaiacon/statisch/quicksand-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF}
:root{
  --creme:#FBF4EE; --creme-2:#F4EDE1; --creme-3:#EAE0CC; --karte:#FFFDF8;
  --text:#1C1613; --text-2:#5A524B; --terra:#B25222; --terra-dunkel:#9C4517;
  --terra-hell:#E2652C; --peach:#FFD9C2;
  --radius:18px; --radius-s:12px;
  --schatten:0 1px 2px rgba(28,22,19,.05), 0 8px 28px rgba(28,22,19,.07);
  --schatten-hoch:0 2px 4px rgba(28,22,19,.06), 0 18px 44px rgba(28,22,19,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:Quicksand,'Avenir Next',system-ui,-apple-system,sans-serif;
  font-weight:500; color:var(--text); background:var(--creme);
  background-image:radial-gradient(1200px 600px at 85% -10%, var(--peach) 0%, transparent 55%);
  background-attachment:fixed; min-height:100vh; line-height:1.55}
a{color:var(--terra); text-decoration:none}
a:hover{color:var(--terra-dunkel); text-decoration:underline}
.huelle{max-width:1080px; margin:0 auto; padding:0 16px}
.kopf{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0 6px; flex-wrap:wrap}
.marke{display:flex; align-items:center; gap:11px; font-weight:700; font-size:1.22rem; color:var(--text)}
.marke img{height:26px; width:auto}
.kopf-rechts{display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--text-2)}
.karte{background:var(--karte); border:1px solid var(--creme-3); border-radius:var(--radius);
  box-shadow:var(--schatten)}
h1{font-size:clamp(1.6rem,4.2vw,2.4rem); line-height:1.15; letter-spacing:-.025em; font-weight:700; margin:.2em 0 .35em}
h2{font-size:1.22rem; font-weight:700; margin:0 0 .6em}
h3{font-size:1.02rem; font-weight:700; margin:0 0 .3em}
.lead{color:var(--text-2); font-size:1.04rem; margin:0 0 1.5em}
.meta{font-size:.82rem; color:var(--text-2)}
.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--terra); color:#fff; border:0; border-radius:999px; padding:12px 22px;
  font:inherit; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(178,82,34,.28)}
.knopf:hover{background:var(--terra-dunkel); color:#fff; text-decoration:none}
.knopf.leer{background:transparent; color:var(--terra); border:1.5px solid var(--creme-3); box-shadow:none}
.knopf.leer:hover{background:var(--creme-2)}
.knopf.klein{padding:8px 15px; font-size:.85rem}
.knopf.breit{width:100%}
.alslink{background:none; border:0; padding:0; font:inherit; color:var(--terra); cursor:pointer}
label{display:block; font-size:.86rem; font-weight:700; color:var(--text-2); margin:0 0 6px}
input,textarea,select{width:100%; font:inherit; color:var(--text); background:#fff;
  border:1.5px solid var(--creme-3); border-radius:var(--radius-s); padding:11px 13px}
input:focus,textarea:focus{outline:0; border-color:var(--terra-hell); box-shadow:0 0 0 4px rgba(226,101,44,.14)}
textarea{min-height:92px; resize:vertical}
.feld{margin-bottom:16px}
.hinweis{border-radius:var(--radius-s); padding:12px 15px; font-size:.9rem; margin:0 0 18px}
.hinweis.warn{background:#FDECE4; border:1px solid #F3C4AC; color:#7C2D0C}
.hinweis.gut{background:#EAF3EA; border:1px solid #C3DDC5; color:#2A5A2E}
.schild{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--creme-2);
  color:var(--text-2); border:1px solid var(--creme-3)}
.mitte{min-height:100vh; display:grid; place-items:center; padding:32px 16px}
.login-karte{background:var(--karte); border:1px solid var(--creme-3); border-radius:24px;
  box-shadow:var(--schatten-hoch); padding:34px 30px; width:100%; max-width:430px}
.gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin:22px 0 32px}
.projekt{padding:22px; display:flex; flex-direction:column; gap:10px}
.projekt .fuss{display:flex; gap:10px; flex-wrap:wrap; margin-top:auto}
.abschnitt{padding:24px; margin-bottom:20px}
.fuss-zeile{padding:26px 0 40px; color:var(--text-2); font-size:.84rem; border-top:1px solid var(--creme-3); margin-top:14px}
.banner{background:#3A2A20; color:#fff; padding:9px 16px; font-size:.88rem; display:flex;
  gap:12px; align-items:center; justify-content:center; flex-wrap:wrap}
.banner .alslink{color:#FFD9C2; text-decoration:underline}
/* Vertragsseite */
.vertrag h1{font-size:1.5rem; margin:0 0 .2em}
.vertrag h2{font-size:1.05rem; margin:1.6em 0 .4em}
.vertrag .hinweis-quelle{color:#8a7f72; font-size:.85rem; margin:0 0 1.4em}
.vertrag .parteien{display:flex; gap:30px; flex-wrap:wrap}
.vertrag .parteien>p{flex:1 1 240px}
.vertrag table{width:100%; border-collapse:collapse; margin:1em 0; font-size:.9rem}
.vertrag th,.vertrag td{border:1px solid #e3ddd4; padding:4px 7px; text-align:left; vertical-align:top}
.vertrag .satz-tabelle th{width:30%}
.vertrag label{margin:.5em 0}
/* Ansicht: Website im Rahmen, Rueckmeldungen daneben */
.ansicht{display:flex; height:100vh; flex-direction:column}
.ansicht-kopf{display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--karte);
  border-bottom:1px solid var(--creme-3); flex-wrap:wrap}
.ansicht-rumpf{flex:1; display:flex; min-height:0}
.ansicht-rumpf iframe{flex:1; border:0; background:#fff; min-width:0}
.leiste{width:340px; max-width:100%; overflow:auto; padding:14px; border-left:1px solid var(--creme-3); background:var(--creme)}
.leiste.zu{display:none}
.rueck{padding:10px 0; border-bottom:1px solid var(--creme-3)}
.rueck.team{padding-left:14px; border-left:3px solid var(--terra)}
@media (max-width:720px){
  .ansicht-rumpf{flex-direction:column}
  .leiste{width:auto; border-left:0; border-top:1px solid var(--creme-3); max-height:45vh}
  .login-karte{padding:26px 20px}
}
/* Rechnung und vaiacon Pay. Die Bezahlkarte steht zuoberst: Betrag gross, ein Knopf,
   der Buerobot daneben. Erst der Klick fuehrt zur Kartenzahlung. */
.karte.rechnung{padding:26px 24px; margin:0 0 18px}
.pay{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.pay-bot{width:104px; flex:0 0 auto}
.pay-bot img{width:100%; height:auto; display:block}
.pay-text{flex:1 1 260px; min-width:0}
.pay-marke{display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--terra); margin:0 0 6px}
.pay-marke img{height:36px; width:auto; display:block}
/* Comic-Sprechblase wie im Designsystem: Kartenflaeche, harter Tintenrand,
   versetzter Schatten, Zipfel als gedrehtes Quadrat. */
.blase{position:relative; display:inline-block; background:#FFFDF8; color:#1C1613;
  border:2px solid #1C1613; border-radius:16px; padding:11px 16px; margin:0 0 12px;
  font-weight:700; font-size:1rem; box-shadow:4px 4px 0 rgba(28,22,19,.85)}
.blase::before{content:''; position:absolute; left:-9px; top:50%; margin-top:-8px; width:16px; height:16px;
  background:#FFFDF8; border-left:2px solid #1C1613; border-bottom:2px solid #1C1613;
  transform:rotate(45deg)}
.pay-betrag{font-size:clamp(2rem,6vw,2.9rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.05; margin:0 0 4px}
.pay-frist{margin:0 0 16px}
.pay-knoepfe{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.posten-liste{width:100%; border-collapse:collapse; margin:4px 0 0}
.posten-liste td{padding:11px 0; border-bottom:1px solid var(--creme-2); vertical-align:top}
.posten-liste td+td{text-align:right; white-space:nowrap; padding-left:14px}
.posten-liste tr:last-child td{border-bottom:0; border-top:2px solid var(--creme-3);
  font-weight:700; font-size:1.06rem}