/* =========================================================================
   Quaggy Shop – Design-System
   Angelehnt an die Muttergesellschaft rs-intralogistik.de:
   Hausfarbe #0081A4, Schrift Encode Sans, eckige Kanten, weisse Kopfzeile.
   Farben zentral hier oben aendern, sonst nirgends Farbwerte eintragen.
   ========================================================================= */
@import url('../fonts/encode-sans.css');

:root{
  --brand:        #0081a4;   /* Hausfarbe der RS-Gruppe */
  --brand-dark:   #00637e;
  --brand-light:  #00a5cc;
  --brand-deep:   #01394a;   /* dunkler Grund fuer das Partnerband */
  --accent:       #00a5cc;   /* helle Signalfarbe */
  --ink:          #000000;   /* Fliesstext (wie rs-intralogistik: reines Schwarz) */
  --ink-soft:     #545454;   /* Nebentext */
  --line:         #dcdcdc;   /* Trennlinien */
  --bg:           #ffffff;
  --bg-soft:      #f2f5f7;   /* graue Flaechen */
  --dark:         #14181a;   /* dunkle Flaechen (Fussbereich) */
  --ok:           #1e7a45;
  --warn:         #b3541e;
  --err:          #b3261e;
  --radius:       0px;       /* eckig – wie auf rs-intralogistik.de */
  --shadow:       0 2px 10px rgba(0,0,0,.07);
  --shadow-lg:    0 10px 30px rgba(0,0,0,.13);
  --wrap:         1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 'Encode Sans','Segoe UI',system-ui,Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--brand);font-weight:900}
h1{font-size:clamp(1.8rem,3.4vw,2.4rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
h3{font-size:1.1rem;font-weight:700;color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- Kopf */
/* Weisse Kopfzeile mit schwarzer Navigation in Grossbuchstaben – wie rs-intralogistik.de */
.site-head{background:#fff;color:var(--ink);position:sticky;top:0;z-index:50;
  border-bottom:1px solid var(--line)}
.site-head::before{content:"";display:block;height:4px;background:var(--brand)}
.head-inner{display:flex;align-items:center;gap:24px;min-height:96px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--brand);font-weight:900;
  font-size:1.35rem}
.logo:hover{text-decoration:none}
.logo-mark{width:40px;height:40px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1.3rem}
.logo-bild{height:74px;width:auto;object-fit:contain}
.mainnav{display:flex;gap:26px;margin-left:auto}
.mainnav a{color:var(--ink);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;padding:8px 0;border-bottom:3px solid transparent}
.mainnav a:hover,.mainnav a.aktiv{border-bottom-color:var(--brand);color:var(--brand);
  text-decoration:none}
.head-actions{display:flex;align-items:center;gap:18px}
.head-phone{color:var(--ink-soft);font-size:.92rem;white-space:nowrap;font-weight:600}
.head-phone:hover{color:var(--brand)}
.cart-link{position:relative;background:var(--brand);color:#fff;font-weight:700;
  padding:11px 18px;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase}
.cart-link:hover{text-decoration:none;background:var(--brand-dark)}
.cart-badge{background:#fff;color:var(--brand);border-radius:999px;padding:1px 7px;
  font-size:.78rem;margin-left:6px;font-weight:900}
.navtoggle,.burger{display:none}

/* ---------------------------------------------------------------- Buttons */
/* Eckig, kraeftig, Grossbuchstaben – die Formsprache der RS-Gruppe. */
.btn{display:inline-block;background:var(--brand-dark);color:#fff;cursor:pointer;
  border:2px solid transparent;padding:12px 24px;border-radius:var(--radius);
  font:inherit;font-weight:700;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;text-align:center;transition:background .15s,color .15s}
.btn:hover{background:var(--ink);color:#fff;text-decoration:none}
.btn-accent{background:var(--brand);color:#fff}
.btn-accent:hover{background:var(--brand-dark)}
.btn-ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}
.btn-ghost.hell{color:#fff;border-color:#fff}
.btn-ghost.hell:hover{background:#fff;color:var(--brand)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#8c1e18}
.btn-sm{padding:7px 14px;font-size:.8rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------------------------------------------------------------- Meldungen */
.flash{padding:12px 16px;border-radius:var(--radius);margin:16px 0;border-left:4px solid}
.flash-ok{background:#e8f5ee;border-color:var(--ok);color:#14532d}
.flash-err{background:#fdecea;border-color:var(--err);color:#7f1d1d}
.flash-warn{background:#fdf3e6;border-color:var(--warn);color:#7c2d12}

/* ---------------------------------------------------------------- Startseite */
.hero{background:linear-gradient(115deg,var(--brand-dark) 0%,var(--brand) 100%);
  color:#fff;padding:76px 0 86px;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  position:relative;z-index:1}
.hero-kicker{display:inline-block;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:14px;
  padding:5px 12px;background:rgba(255,255,255,.16)}
.hero h1{color:#fff;max-width:17ch}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:56ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-bild img{width:100%;height:auto;background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.3)}

.usp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  margin:-44px auto 0;position:relative;z-index:2;background:var(--line)}
.usp{background:#fff;padding:28px 24px;border-top:4px solid var(--brand)}
.usp-icon{font-size:.75rem;font-weight:900;color:var(--brand);letter-spacing:.14em;
  margin-bottom:10px}
.usp h3{font-size:1.05rem;margin-bottom:.35em;font-weight:900;color:var(--ink)}
.usp p{margin:0;color:var(--ink-soft);font-size:.94rem}

/* ---- Kopfbereich mit Hintergrundvideo ----
   Das Video liegt bildschirmfuellend hinter dem Text. Quelle ist bewusst nur
   640x280: Diese Aufloesung erzeugt auf der Zielhardware keine messbare Last
   am Videodecoder, 1280x560 dagegen schon (nachgemessen). Der Browser
   vergroessert das Bild – bei einem abgedunkelten Hintergrund faellt das kaum
   auf.
   Der Farbverlauf fuer die Lesbarkeit ist ins Video eingerechnet, damit keine
   halbdurchsichtige Flaeche darueber liegen muss (die zwaenge den Browser,
   jedes Einzelbild neu zu verrechnen). */
.hero-video{padding:96px 0 104px}
.hero-video .hero-film{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;border:0;background:var(--brand-dark)}
/* Bildschirmfuellend heisst: nur eine Spalte, sonst klafft rechts eine Luecke. */
.hero-video .hero-inner{position:relative;z-index:2;grid-template-columns:1fr}
.hero-video .hero-inner > div{max-width:62ch}

/* ---- Video-Abschnitt (Einbettung von YouTube) ----
   Laedt YouTube ERST auf Klick. Vorher wird nichts von dort geholt, es gibt
   also keine Datenuebertragung an Google und keine Grafiklast. */
.videobox{position:relative;aspect-ratio:16/9;background:var(--brand-deep);
  overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;display:block}
.videobox img{width:100%;height:100%;object-fit:cover;opacity:.82;
  transition:opacity .15s}
.videobox:hover img{opacity:1}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videobox-knopf{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;color:#fff;pointer-events:none}
.videobox-play{width:78px;height:78px;border-radius:50%;background:var(--brand);
  position:relative;box-shadow:0 8px 26px rgba(0,0,0,.45)}
.videobox-play::after{content:"";position:absolute;left:31px;top:24px;
  border-style:solid;border-width:15px 0 15px 23px;
  border-color:transparent transparent transparent #fff}
.videobox-text{font-size:.85rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.videobox-hinweis{font-size:.82rem;color:var(--ink-soft);margin-top:10px}

/* Medium als feste Spalte – Rueckfall, wenn kein Video vorhanden ist. */
.hero-medium{max-width:620px;width:100%;justify-self:end}
.hero-medium video,.hero-medium img{width:100%;height:auto;display:block;
  background:var(--brand-dark);box-shadow:0 16px 44px rgba(0,0,0,.32)}

/* Variante ohne Video: dasselbe Bild, nur unbewegt (HERO_VIDEO = false).
   Belastet Grafikeinheit und Akku gar nicht. */
.hero-standbild{background-size:cover;background-position:center;padding:96px 0 104px}
.hero-standbild .hero-inner{position:relative;z-index:2}

/* ---- Partnerband ----
   Die Partnerlogos sind WEISS (sie stammen vom dunklen Banner der alten
   Seite). Deshalb steht dieser Abschnitt auf dunklem Grund – auf Weiss waeren
   die Logos unsichtbar. Wer spaeter dunkle Logos einpflegt, dreht hier
   --partner-bg auf eine helle Farbe und passt die Kachelfarben an. */
.partner{background:var(--brand-deep);padding:72px 0}
.partner h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.partner .section-head{border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:18px;margin-bottom:32px}
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px}
.partner-logo{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  height:190px;display:flex;align-items:center;justify-content:center;
  padding:26px 30px;overflow:hidden;
  transition:background .15s,border-color .15s}
.partner-logo:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
/* Feste Masse statt Prozentwerten: bei hohen Logos (SAVA, WOW, Powerland)
   greift max-height:100% nicht zuverlaessig – object-fit haelt sie sicher drin. */
.partner-logo img{width:100%;height:100%;object-fit:contain;object-position:center;
  opacity:.92;transition:opacity .15s}
.partner-logo:hover img{opacity:1}

/* ---- Firmenlogos und Social im Fuss ---- */
.foot-marken{display:flex;align-items:center;gap:44px;flex-wrap:wrap;
  padding:32px 20px;border-top:1px solid rgba(255,255,255,.12)}
.foot-firmenlogo{height:74px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.92}
.foot-social{display:flex;gap:14px;margin-left:auto}
/* Mit .site-foot davor, sonst gewinnt die allgemeine Regel ".site-foot a"
   weiter unten (gleiche Gewichtung, spaetere Zeile) und setzt display:block
   samt Innenabstand – die Symbole saessen dann nicht mittig. */
.site-foot .foot-social a{padding:0;display:flex;align-items:center;
  justify-content:center;width:46px;height:46px;
  border-radius:8px;background:rgba(255,255,255,.1)}
.site-foot .foot-social a:hover{background:rgba(255,255,255,.2)}
.site-foot .foot-social img{width:24px;height:24px;object-fit:contain;
  display:block;filter:brightness(0) invert(1)}

.zwei-spalten{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.kontakt-box{background:var(--bg-soft);border-radius:var(--radius);padding:26px;
  border-left:4px solid var(--brand)}
.kontakt-box h3{margin-top:0}
.klein{font-size:.84rem;color:var(--ink-soft)}
.unter{color:var(--ink-soft);margin-top:-.4em}
.brotkrumen{font-size:.88rem;color:var(--ink-soft)}
.mehr{font-weight:600;white-space:nowrap}
.preis-anfrage{font-size:1.02rem;color:var(--brand-light);font-weight:650}
.kat-titel{margin:34px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--line);
  display:flex;align-items:baseline;gap:12px}
.kat-titel span{font-size:.86rem;font-weight:400;color:var(--ink-soft)}
.kat-card .card-body{padding:26px 20px}
.vorteile{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid var(--line);
  padding-top:16px}
.vorteile li{padding:6px 0 6px 26px;position:relative;color:var(--ink-soft);font-size:.94rem}
.vorteile li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.mainnav a.aktiv{border-bottom-color:var(--accent)}
.section{padding:56px 0}
.section-soft{background:var(--bg-soft)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:26px}

/* ---------------------------------------------------------------- Produkte */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.card-img{aspect-ratio:4/3;background:var(--bg-soft);overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--brand);font-weight:700}
.card-name{font-weight:700;color:var(--ink);font-size:1.02rem;margin:0;line-height:1.35}
.card-name a{color:inherit}
.card-price{font-size:1.25rem;font-weight:900;color:var(--ink);margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line)}
.card-price small{display:block;font-size:.72rem;font-weight:400;color:var(--ink-soft);
  text-transform:none;letter-spacing:0}
.price-old{text-decoration:line-through;color:var(--ink-soft);font-size:.9rem;font-weight:400;
  margin-right:6px}
.badge{display:inline-block;background:var(--brand);color:#fff;font-size:.7rem;
  font-weight:700;padding:3px 9px;letter-spacing:.06em;text-transform:uppercase}
.badge-used{background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--line)}
.preis-anfrage{font-size:1.05rem;color:var(--brand);font-weight:900}

/* Shop-Filter */
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.filter-box{background:var(--bg-soft);border-radius:var(--radius);padding:18px;
  position:sticky;top:90px}
.filter-box h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.filter-box a{display:block;padding:6px 0;color:var(--ink)}
.filter-box a.active{color:var(--brand);font-weight:700}

/* Produktdetail */
.prod-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start}
.gallery-main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg-soft);aspect-ratio:4/3}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery-thumbs img{width:76px;height:60px;object-fit:cover;border:2px solid var(--line);
  border-radius:6px;cursor:pointer}
.gallery-thumbs img.active{border-color:var(--brand)}
.detail-price{font-size:2rem;font-weight:800;color:var(--brand);margin:14px 0 4px}
.detail-vat{color:var(--ink-soft);font-size:.88rem;margin-bottom:20px}
.buy-row{display:flex;gap:12px;align-items:center;margin:22px 0;flex-wrap:wrap}
.qty{width:78px;padding:11px;border:1px solid var(--line);border-radius:var(--radius);font:inherit}
.spec-table{width:100%;border-collapse:collapse;margin-top:10px}
.spec-table th,.spec-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:.94rem;vertical-align:top}
.spec-table th{width:42%;color:var(--ink-soft);font-weight:600}
.prose{line-height:1.7}
.prose h2,.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose table{width:100%;border-collapse:collapse;margin:1em 0}
.prose td,.prose th{border:1px solid var(--line);padding:8px 10px}

/* ---------------------------------------------------------------- Warenkorb */
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:10px;border-bottom:2px solid var(--line)}
.cart-table td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-thumb{width:84px;height:64px;object-fit:cover;border-radius:6px;background:var(--bg-soft)}
.cart-sum{margin-left:auto;max-width:400px;background:var(--bg-soft);padding:22px;
  border-radius:var(--radius);margin-top:26px}
.sum-row{display:flex;justify-content:space-between;padding:6px 0}
.sum-total{border-top:2px solid var(--line);margin-top:10px;padding-top:12px;
  font-size:1.25rem;font-weight:800;color:var(--brand)}

/* ---------------------------------------------------------------- Formulare */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.field input,.field textarea,.field select{
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font:inherit;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--brand-light);outline-offset:1px;border-color:var(--brand-light)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.8rem;color:var(--ink-soft)}
.req{color:var(--err)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  margin-bottom:22px}
.panel h2{margin-top:0;font-size:1.15rem}

/* ---------------------------------------------------------------- Fuss */
.site-foot{background:var(--dark);color:#b9c3c7;margin-top:70px;padding:50px 0 0;
  border-top:4px solid var(--brand)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px;
  padding-bottom:34px}
.foot-title{color:#fff;font-weight:900;margin-bottom:14px;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase}
.site-foot a{color:#b9c3c7;display:block;padding:3px 0}
.site-foot a:hover{color:var(--brand-light)}
.site-foot p{margin:0 0 12px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;padding-bottom:18px;
  font-size:.84rem;color:#8c979b}

/* ---------------------------------------------------------------- Mobil */
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .filter-box{position:static}
  .prod-detail{grid-template-columns:1fr;gap:26px}
  .form-grid{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .hero-bild{order:-1}
  .zwei-spalten{grid-template-columns:1fr}
}
@media (max-width:760px){
  .partner-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .partner-logo{height:122px;padding:16px 18px}
  .foot-social{margin-left:0;width:100%}
}
@media (max-width:760px){
  .burger{display:block;margin-left:auto;width:42px;height:42px;cursor:pointer;
    position:relative;border-radius:8px}
  /* Dunkle Striche – die Kopfzeile ist weiss, weisse Striche waeren unsichtbar. */
  .burger span,.burger span::before,.burger span::after{
    content:"";position:absolute;left:9px;width:24px;height:2px;background:var(--brand);
    transition:.2s}
  .burger span{top:20px}
  .burger span::before{top:-7px;left:0}
  .burger span::after{top:7px;left:0}
  .mainnav{display:none;width:100%;flex-direction:column;gap:0;margin:0;order:5}
  .navtoggle:checked ~ .mainnav{display:flex}
  .mainnav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .head-actions{order:4;margin-left:0}
  .head-phone{display:none}
  .cart-table thead{display:none}
  .cart-table td{display:block;border:0;padding:4px 0}
  .cart-table tr{display:block;border-bottom:1px solid var(--line);padding:14px 0}
  .cart-sum{max-width:none}
}
@media print{
  .site-head,.site-foot,.buy-row{display:none}
}

/* ---- Shop-Seite: moderner Kopf + grauer Grund fuer mehr Tiefe ---- */
.shop-head{background:linear-gradient(115deg,var(--brand-dark) 0%,var(--brand) 100%);
  color:#fff;padding:34px 0 30px}
.shop-head h1{color:#fff;margin:0}
.shop-krume{font-size:.85rem;color:rgba(255,255,255,.8);margin:0 0 8px}
.shop-krume a{color:#fff;text-decoration:underline}
.shop-intro{color:rgba(255,255,255,.92);max-width:70ch;margin-top:10px}
.shop-intro a{color:#fff}
.shop-page{background:var(--bg-soft);min-height:60vh}
/* Filter-Box und Karten heben sich jetzt vom grauen Grund ab */
.shop-page .filter-box{background:#fff;border:1px solid var(--line)}
.shop-page .card{box-shadow:var(--shadow)}
.shop-page .section-head{color:var(--ink-soft)}

/* ---- Leiste fuer angemeldete Mitarbeiter + Direkt-Bearbeitung ---- */
.adminbar{background:var(--dark);color:#fff;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:8px 20px;font-size:.86rem;position:sticky;top:0;z-index:60}
.adminbar-aktiv{background:var(--brand-deep)}
.adminbar-name{font-weight:700}
.adminbar-hinweis{color:rgba(255,255,255,.75)}
.adminbar-btn{background:var(--brand);color:#fff;border:0;cursor:pointer;font:inherit;
  font-weight:700;padding:7px 16px;border-radius:var(--radius);text-transform:uppercase;
  letter-spacing:.04em;font-size:.8rem}
.adminbar-btn:hover{background:var(--brand-light);text-decoration:none;color:#fff}
.adminbar-btn[disabled]{opacity:.45;cursor:default}
.adminbar-link{color:rgba(255,255,255,.8);margin-left:auto}
.adminbar-link:hover{color:#fff}
.adminbar + .site-head{top:41px}

/* markierte Texte im Bearbeitungsmodus */
.inline-feld{outline:2px dashed rgba(0,165,204,.75);outline-offset:4px;cursor:text;
  transition:outline-color .15s,background .15s;border-radius:2px}
.inline-feld:hover{outline-color:var(--accent);background:rgba(0,165,204,.08)}
.inline-aktiv{outline:2px solid var(--accent) !important;
  background:rgba(0,165,204,.12) !important}