:root{
  --bg:#faf7f2; --panel:#ffffff; --panel-2:#f6f2ea; --border:#e7dfd3;
  --text:#1b2430; --muted:#6f6a61; --accent:#0e7c86; --accent-soft:#ddeff1;
  --accent-stark:#0a5c64; --gold:#c08a2e; --gold-soft:#f7edda;
  --green:#2e9e6b; --green-soft:#e2f4ec; --amber:#a9720f; --amber-soft:#fbf0dc;
  --red:#c4453d; --red-soft:#fceceb; --violet:#6b5bd2; --violet-soft:#ecebfb;
  --slate:#5b6472; --slate-soft:#edeae3; --cyan:#0b6f78; --cyan-soft:#dcf0f2;
  --shadow:0 1px 2px rgba(27,36,48,.05),0 6px 18px rgba(27,36,48,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101719; --panel:#172024; --panel-2:#1d272b; --border:#2a373c;
    --text:#eaf0f0; --muted:#9aa8a9; --accent:#3bb3bd; --accent-soft:#11343a;
    --accent-stark:#7fd4db; --gold:#d9ae4a; --gold-soft:#2e2718;
    --green:#4cc794; --green-soft:#12312a; --amber:#e0a33e; --amber-soft:#332714;
    --red:#ef7b73; --red-soft:#3a201e; --violet:#9f92ef; --violet-soft:#232045;
    --slate:#93a1a5; --slate-soft:#212c30; --cyan:#4fc7cf; --cyan-soft:#0f333a;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.3);
    --radius:14px;
  }
}
:root[data-theme="dark"]{
  --bg:#101719; --panel:#172024; --panel-2:#1d272b; --border:#2a373c;
  --text:#eaf0f0; --muted:#9aa8a9; --accent:#3bb3bd; --accent-soft:#11343a;
  --accent-stark:#7fd4db; --gold:#d9ae4a; --gold-soft:#2e2718;
  --green:#4cc794; --green-soft:#12312a; --amber:#e0a33e; --amber-soft:#332714;
  --red:#ef7b73; --red-soft:#3a201e; --violet:#9f92ef; --violet-soft:#232045;
  --slate:#93a1a5; --slate-soft:#212c30; --cyan:#4fc7cf; --cyan-soft:#0f333a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.3);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Landesflagge der gewählten Sprache ganz zart im Seitenhintergrund.
   Liegt fest hinter allem, nimmt keine Klicks an und stört den Text nicht. */
html.spr-de{--seitenflagge:url(flags/de.svg)}
html.spr-en{--seitenflagge:url(flags/us.svg)}
html.spr-ar{--seitenflagge:url(flags/sy.svg)}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--seitenflagge,none) center/cover no-repeat;
  opacity:.06;
}
html[data-theme="dark"] body::before{opacity:.11}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body::before{opacity:.11}
}
@media print{ body::before{display:none} }
html[dir="rtl"] body{font-size:15.5px;line-height:1.7}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:244px;flex:0 0 244px;background:var(--panel);border-inline-end:1px solid var(--border);
  padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 30px}
.brand-name{font-weight:650;letter-spacing:-.01em}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:var(--muted);font-weight:500;text-decoration:none;
}
.nav-item:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item .ico{width:18px;text-align:center;flex:0 0 18px}
.nav-badge{margin-inline-start:auto;font-size:12px;background:var(--slate-soft);color:var(--muted);border-radius:20px;padding:1px 7px;font-weight:600}
.sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
/* Sprachknöpfe mit Landesflagge im Hintergrund
   (Deutsch = Deutschland, English = USA, العربية = Syrien) */
.langs{display:flex;gap:5px;margin-bottom:10px}
.langs a{
  flex:1;text-align:center;padding:9px 4px;border:1px solid var(--border);border-radius:8px;
  font-size:12.5px;font-weight:700;color:#fff;overflow:hidden;
  --flagge:none;
  --schleier:rgba(10,24,30,.22);
  background:
    linear-gradient(var(--schleier),var(--schleier)),
    var(--flagge) center/cover no-repeat,
    var(--panel-2);
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.8);
  transition:box-shadow .15s ease, background .15s ease;
}
.langs a.lang-de{--flagge:url(flags/de.svg)}
.langs a.lang-en{--flagge:url(flags/us.svg)}
.langs a.lang-ar{--flagge:url(flags/sy.svg)}
.langs a:hover{--schleier:rgba(10,24,30,.08);text-decoration:none;color:#fff}
.langs a.on{
  --schleier:rgba(10,24,30,0);
  border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);color:#fff;
}

/* kleines Flaggensymbol (z. B. in den Einstellungen) */
.flagge{
  display:inline-block;width:20px;height:14px;border-radius:3px;flex:0 0 20px;
  border:1px solid rgba(0,0,0,.18);background:#fff center/cover no-repeat;vertical-align:-2px;
}
/* Ein Block je Sprache in den Einstellungen */
.sprachblock{border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;background:var(--panel-2)}
.sprachblock-kopf{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14px}
.sprachblock .form-grid{margin:0}

.flagge-de{background-image:url(flags/de.svg)}
.flagge-us{background-image:url(flags/us.svg)}
.flagge-sy{background-image:url(flags/sy.svg)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:15px 24px;border-bottom:1px solid var(--border);
  background:var(--panel);position:sticky;top:0;z-index:20;
}
.topbar h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em}
.topbar .sub{color:var(--muted);font-size:13px}
.spacer{flex:1}
.content{padding:22px 24px 60px;max-width:1400px;width:100%}

/* ---------- Bausteine ---------- */
.btn{
  border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:8px 13px;
  cursor:pointer;font-weight:550;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  text-decoration:none;color:var(--text);
}
.btn:hover{background:var(--panel-2);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:5px 9px;font-size:13px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--panel-2)}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.card-head h2{margin:0;font-size:15px;font-weight:650}
.card-body{padding:16px}

.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(182px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:25px;font-weight:680;letter-spacing:-.02em;margin-top:5px;font-variant-numeric:tabular-nums}
.kpi .hint{font-size:12.5px;color:var(--muted);margin-top:3px}

table{width:100%;border-collapse:collapse}
th{
  text-align:start;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:650;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel-2)}
.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.table-wrap{overflow-x:auto}
.row-actions{display:flex;gap:5px;justify-content:flex-end;align-items:center}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-green{background:var(--green-soft);color:var(--green)}
.p-amber{background:var(--amber-soft);color:var(--amber)}
.p-red{background:var(--red-soft);color:var(--red)}
.p-violet{background:var(--violet-soft);color:var(--violet)}
.p-slate{background:var(--slate-soft);color:var(--slate)}
.p-cyan{background:var(--cyan-soft);color:var(--cyan)}
.p-accent{background:var(--accent-soft);color:var(--accent)}

.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:14px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=month],input[type=tel],select,textarea{
  background:var(--panel);border:1px solid var(--border);border-radius:9px;padding:8px 11px;outline:none;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search{max-width:280px}
.filter{width:auto;min-width:160px}
.muted{color:var(--muted)}
.small{font-size:13px}
.strong{font-weight:620}
.empty{padding:38px 16px;text-align:center;color:var(--muted)}
.bar{height:8px;border-radius:6px;background:var(--slate-soft);overflow:hidden;min-width:70px}
.bar>i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.stack{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--slate-soft)}
.stack>i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.legend b{width:9px;height:9px;border-radius:3px;display:inline-block}
.two-col{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
/* Rasterfelder dürfen nicht durch breite Tabellen aufgeblasen werden */
.two-col > *{min-width:0}
.sec-title{font-size:13px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 10px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
textarea{min-height:80px;resize:vertical}
.form-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

.flash{
  background:var(--green-soft);color:var(--green);border:1px solid var(--green);
  border-radius:10px;padding:10px 14px;margin-bottom:16px;font-weight:550;
}
.alert{
  background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber);
  border-radius:10px;padding:14px 16px;margin-bottom:16px;
}
.alert.bad{background:var(--red-soft);color:var(--red);border-color:var(--red)}

/* ---------- Setup-Seite ---------- */
.setup{max-width:640px;margin:8vh auto;padding:0 20px}
.setup .card-body{padding:26px}
.setup h1{margin:0 0 6px;font-size:22px}
.code{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow-x:auto;direction:ltr;text-align:left}

@media (max-width:980px){ .two-col{grid-template-columns:1fr} }
@media (max-width:900px){
  .app{flex-direction:column}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;padding:8px 12px 10px;gap:0;
    border-inline-end:none;border-bottom:1px solid var(--border);
  }
  /* Marke und Sprache/Verknüpfungen in einer Zeile */
  .brand{padding:6px 0 8px;gap:9px}
  .brand-mark{width:32px;height:32px;flex:0 0 32px}
  .sidebar nav{
    display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .sidebar nav::-webkit-scrollbar{display:none}
  .nav-item{white-space:nowrap;padding:9px 13px}
  .nav-badge{
    display:inline-block;margin-inline-start:6px;font-size:11px;padding:0 6px;
  }
  .sidebar-foot{
    margin-top:8px;padding-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  }
  .sidebar-foot .langs{margin:0;width:auto;flex:0 0 auto;gap:6px}
  .sidebar-foot .langs a{flex:0 0 auto;min-width:46px;padding:0 12px}
  .sidebar-foot .social{margin:0 0 0 auto;flex:0 0 auto}
  html[dir="rtl"] .sidebar-foot .social{margin:0 auto 0 0}
  .sidebar-foot > .muted.small{display:none}

  .content{padding:16px 14px 52px}
  .topbar{padding:11px 14px;flex-wrap:wrap;row-gap:8px;gap:10px}
  .topbar h1{font-size:17px}
  .topbar .sub{font-size:12.5px}
  .nutzer{margin-inline-start:auto;text-align:start}
  .form-grid{grid-template-columns:1fr}
  .search{max-width:none}
}

/* Sehr schmale Geräte: Kopfzeile stapeln */
@media (max-width:460px){
  .topbar > div:first-child{flex:1 1 100%}
  .nutzer{margin-inline-start:0}
  .topbar .btn.primary{flex:1 1 auto;justify-content:center}
}

/* Zwischenüberschrift im Formular */
.form-group{margin-top:6px;padding-top:14px;border-top:1px solid var(--border)}
.form-group:first-child{margin-top:0;padding-top:0;border-top:none}
.form-group span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- Dateien: Upload, Galerie, Vorschau ---------- */
.upload-form{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.datei-wahl{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.datei-wahl input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.datei-wahl input[type=file]:focus + .btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.datei-wahl [data-dateiname]{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.galerie{
  display:grid;gap:14px;margin-top:16px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.kachel{margin:0;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.kachel-bild{display:block;aspect-ratio:4/3;background:var(--slate-soft);overflow:hidden}
.kachel-bild img{width:100%;height:100%;object-fit:cover;display:block}
.kachel-bild:hover img{transform:scale(1.03);transition:transform .2s}
.kachel-doc{display:grid;place-items:center;text-decoration:none}
.doc-typ{
  font-weight:750;font-size:15px;letter-spacing:.08em;color:var(--muted);
  border:2px solid var(--border);border-radius:8px;padding:8px 12px;background:var(--panel);
}
.kachel figcaption{padding:9px 10px;display:flex;flex-direction:column;gap:2px}
.kachel-aktionen{display:flex;gap:4px;justify-content:flex-end;margin-top:6px}

.lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(10,14,20,.88);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 20px;
}
.lightbox[hidden]{display:none}
.lb-inhalt{max-width:min(1100px,94vw);max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-inhalt img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px;background:#fff}
.lb-inhalt iframe{width:min(1000px,92vw);height:82vh;border:none;border-radius:8px;background:#fff}
.lb-titel{color:#e7eaef;font-size:14px;text-align:center;max-width:90vw}
.lb-close{
  position:absolute;top:14px;inset-inline-end:18px;background:none;border:none;color:#e7eaef;
  font-size:34px;line-height:1;cursor:pointer;padding:4px 10px;border-radius:8px;
}
.lb-close:hover{background:rgba(255,255,255,.12)}

.klammer{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.lb-link{color:#9fc0ff;margin-inline-start:10px;text-decoration:underline}

/* ---------- Marke und soziale Knöpfe ---------- */
.brand-mark{background:linear-gradient(135deg,var(--accent),var(--accent-stark));letter-spacing:.02em}
.brand-name{font-size:15px;line-height:1.2}
.brand-sub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.social{display:flex;gap:6px;margin-bottom:10px}
.soz{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--border);color:var(--muted);font-weight:700;font-size:15px;text-decoration:none;
}
.soz:hover{text-decoration:none;color:#fff}
.soz-wa:hover{background:#25d366;border-color:#25d366}
.soz-fb:hover{background:#1877f2;border-color:#1877f2}
.soz-web:hover{background:var(--accent);border-color:var(--accent)}

/* ---------- Anfragen ---------- */
.anfragen{display:flex;flex-direction:column;gap:12px}
.anfrage-kopf{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
.anfrage-text{
  margin-top:12px;padding:12px 14px;background:var(--panel-2);border-radius:10px;
  border-inline-start:3px solid var(--accent);line-height:1.6;
}
.anfrage-fuss{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.btn.wa{background:#25d366;border-color:#25d366;color:#08331a;font-weight:650}
.btn.wa:hover{filter:brightness(1.06)}
.btn.fb{background:#1877f2;border-color:#1877f2;color:#fff}
.btn.fb:hover{filter:brightness(1.08)}

/* ---------- Öffentliche Angebotsseite ---------- */
body.oeffentlich{background:var(--bg)}
.hero{
  background:linear-gradient(135deg,var(--accent-stark),var(--accent) 55%,#14707a);
  color:#f4fbfb;padding:0 20px 42px;
}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#0c2f34,#12545c 60%,#0e6a72)}
.hero-innen{max-width:1180px;margin:0 auto;padding-top:22px}
.hero-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero .brand{padding:0}
.hero .brand-mark{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;width:42px;height:42px;flex:0 0 42px;font-size:16px;border-radius:12px}
.hero .brand-name{color:#fff}
.hero .brand-sub{color:rgba(255,255,255,.78)}
.hero h1{
  margin:0 0 22px;font-size:clamp(22px,3.4vw,36px);font-weight:680;letter-spacing:-.02em;
  max-width:24ch;line-height:1.25;
}
.hero-langs{gap:7px}
.hero-langs a{border-color:rgba(255,255,255,.55);--schleier:rgba(8,26,32,.18);min-width:52px;flex:0 0 auto}
.hero-langs a:hover{--schleier:rgba(8,26,32,.04);border-color:#fff}
.hero-langs a.on{--schleier:rgba(8,26,32,0);border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:9px}
.hero-knoepfe .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff}
.hero-knoepfe .btn:hover{background:rgba(255,255,255,.24)}
.hero-knoepfe .btn.primary{background:#fff;border-color:#fff;color:var(--accent-stark)}
.hero-knoepfe .btn.wa{background:#25d366;border-color:#25d366;color:#08331a}
.hero-knoepfe .btn.fb{background:#1877f2;border-color:#1877f2;color:#fff}

.oeff-inhalt{max-width:1180px;margin:0 auto;padding:30px 20px 60px}
.oeff-titel{font-size:20px;font-weight:660;letter-spacing:-.02em;margin:28px 0 14px}
.oeff-titel:first-child{margin-top:0}

.angebote{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.angebot{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
}
.angebot-bild{position:relative;aspect-ratio:16/10;background:var(--panel-2);overflow:hidden}
.angebot-bild img{width:100%;height:100%;object-fit:cover;display:block}
.angebot:hover .angebot-bild img{transform:scale(1.04);transition:transform .35s}
.kein-bild{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--panel-2),var(--accent-soft));
}
.kein-bild span{font-size:30px;font-weight:750;color:var(--accent);opacity:.55;letter-spacing:.04em}
.angebot-status{position:absolute;top:10px;inset-inline-start:10px}
.angebot-status .pill{box-shadow:0 2px 8px rgba(0,0,0,.14)}
.angebot-text{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.angebot-text h3{margin:0;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.merkmale{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:4px 0 0;padding:0}
.merkmale li{
  font-size:12.5px;font-weight:600;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:3px 10px;
}
.angebot-text p.small{margin:2px 0 0;color:var(--muted)}
.preis{margin-top:auto;padding-top:10px;font-size:17px}
.preis strong{color:var(--accent);font-weight:700}
.angebot-text .btn{align-self:flex-start;margin-top:8px}

.anfrage-karte{margin-top:34px;scroll-margin-top:20px}
.honigtopf{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.oeff-fuss{border-top:1px solid var(--border);background:var(--panel);margin-top:20px}
.oeff-fuss-innen{
  max-width:1180px;margin:0 auto;padding:24px 20px;display:flex;gap:18px;
  align-items:flex-start;flex-wrap:wrap;
}
.oeff-fuss .social{margin:0}

@media (max-width:640px){
  .hero-innen{padding-top:16px}
  .hero{padding-bottom:30px}
  .oeff-inhalt{padding:22px 16px 46px}
}

/* ---------- Benutzer in der Kopfzeile ---------- */
.nutzer{text-align:end;line-height:1.2;margin-inline-end:2px}
.nutzer-name{font-weight:620;font-size:13.5px}
.nutzer-rolle{font-size:11.5px;color:var(--muted)}

/* ---------- Anmeldeseite ---------- */
body.anmeldeseite{
  min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:
    radial-gradient(1000px 600px at 12% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, var(--gold-soft), transparent 55%),
    var(--bg);
}
.anmelde-huelle{width:min(430px,100%)}
.anmelde-karte{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  box-shadow:0 2px 6px rgba(27,36,48,.06),0 22px 50px rgba(27,36,48,.12);
  padding:28px 26px 22px;
}
.anmelde-marke{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.anmelde-marke .brand-mark{width:44px;height:44px;flex:0 0 44px;font-size:16px;border-radius:13px}
.anmelde-karte h1{margin:0 0 6px;font-size:21px;font-weight:660;letter-spacing:-.02em}
.anmelde-karte p.muted{margin:0 0 18px;font-size:14px}
.anmelde-karte .field{margin-bottom:13px}
.btn.breit{width:100%;justify-content:center;padding:11px 14px;margin-top:6px}
.anmelde-fuss{
  display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);font-size:13px;
}
.anmelde-fuss .langs{margin:0 0 0 auto}
html[dir="rtl"] .anmelde-fuss .langs{margin:0 auto 0 0}

/* Zwei-Faktor-Anmeldung */
.mfa-qr{
  display:flex;justify-content:center;margin:0 0 14px;
  padding:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
}
.mfa-qr svg{width:min(210px,60vw);height:auto;display:block}
.mfa-feld{
  font-size:26px;letter-spacing:.34em;text-align:center;font-weight:650;
  font-variant-numeric:tabular-nums;
}
html[dir="rtl"] .mfa-feld{direction:ltr}

/* ---------- Startseite: Begrüßung, Kennzahlen, Bewegung ---------- */
.hero-gruss{
  margin:0 0 6px;font-size:clamp(14px,1.8vw,17px);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
}
.hero h1{margin:0 0 10px;max-width:22ch}
.hero-unter{margin:0 0 24px;font-size:clamp(14.5px,1.7vw,17px);color:rgba(255,255,255,.86);max-width:52ch;line-height:1.55}

.kennzahlen{
  display:grid;gap:12px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}
.kz{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:14px 16px;backdrop-filter:blur(4px);
}
.kz-wert{display:block;font-size:clamp(22px,3vw,30px);font-weight:720;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.kz-text{display:block;font-size:12.5px;color:rgba(255,255,255,.78);margin-top:3px}

.ueber{margin-bottom:28px}
.ueber-text{margin:0;font-size:16px;line-height:1.7;max-width:70ch;color:var(--text)}

/* Einblenden */
.stufe,.zeigen{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.stufe.da,.zeigen.da{opacity:1;transform:none}
.angebot{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,opacity .7s ease}
.angebot.da:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(27,36,48,.14)}
:root[data-theme="dark"] .angebot.da:hover{box-shadow:0 10px 30px rgba(0,0,0,.45)}
.kachel,.kpi{transition:transform .25s ease,box-shadow .25s ease}
.kpi:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  .stufe,.zeigen{opacity:1;transform:none;transition:none}
  .angebot:hover,.kpi:hover{transform:none}
  .angebot:hover .angebot-bild img{transform:none}
}

.rechte-liste{margin:0;padding-inline-start:18px;line-height:1.8}

/* ---------- Bedienung auf Handy und Tablet ---------- */
@media (max-width:900px), (pointer:coarse){
  .btn{min-height:42px}
  .btn.sm{min-height:38px;padding:7px 12px}
  .btn.breit{min-height:46px}
  .langs a{min-height:40px;display:grid;place-items:center}
  .soz{width:40px;height:40px}
  .nav-item{min-height:42px}
  /* 16px verhindert das automatische Hineinzoomen beim Antippen auf iPhones */
  input[type=text],input[type=number],input[type=date],input[type=email],input[type=month],
  input[type=tel],input[type=password],select,textarea{font-size:16px;padding:10px 12px}
  .search{max-width:none;flex:1 1 100%}
  .filter{flex:1 1 46%;min-width:0}
  .toolbar{gap:8px}
  .kachel-aktionen{gap:6px}
  .anfrage-fuss{gap:8px}
  .row-actions{gap:6px}
}

/* Tabellen auf kleinen Geräten angenehmer lesbar */
@media (max-width:900px){
  th,td{padding:12px 10px}
  .content{padding:16px 14px 52px}
  .card-body{padding:14px}
  .form-foot{flex-wrap:wrap}
  .form-foot .btn{flex:1 1 auto;justify-content:center}
}

/* Notebook: Seitenleiste etwas schmaler, mehr Platz für Tabellen */
@media (min-width:901px) and (max-width:1240px){
  .sidebar{width:214px;flex:0 0 214px}
  .content{padding:20px 18px 52px}
}

/* Nebensächliche Tabellenspalten auf schmalen Geräten ausblenden */
@media (max-width:620px){
  .nur-breit{display:none}
}