/* =========================================================
   Grundschule Alftal - Stufe 1 Design
   ========================================================= */
:root{
  --orange:#F08A2A;      --orange-dark:#D9721A;   --orange-soft:#FDF1E3;
  --gruen:#8CBF3F;       --gruen-dark:#6FA02C;    --gruen-soft:#F0F7E3;
  --braun:#5A3921;       --braun-soft:#8A6A50;
  --grau-bg:#F7F7F5;     --grau-line:#E8E6E1;
  --text:#2E2A26;        --weiss:#FFFFFF;
  --radius:14px;         --radius-sm:8px;
  --shadow:0 2px 4px rgba(90,57,33,.05), 0 8px 24px rgba(90,57,33,.06);
  --shadow-hover:0 4px 8px rgba(90,57,33,.08), 0 14px 32px rgba(90,57,33,.10);
  --max:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);background:var(--grau-bg);line-height:1.6;font-size:16px;
}
a{color:var(--orange-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}

/* Header */
header.site{background:#fff;border-bottom:1px solid var(--grau-line);
  position:sticky;top:0;z-index:50;}
.header-inner{max-width:var(--max);margin:0 auto;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1.5rem;position:relative;}
.logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0;}
.logo img{height:56px;width:auto;display:block;}

/* Navigation */
nav.main{margin-left:auto;}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem;}
nav.main > ul > li{position:relative;}
nav.main a.nav-link{display:block;padding:.65rem .95rem;
  color:var(--braun);font-weight:600;font-size:.95rem;border-radius:8px;
  transition:background .15s,color .15s;}
nav.main a.nav-link:hover,nav.main a.nav-link.active{
  background:var(--orange-soft);color:var(--orange-dark);text-decoration:none;}
nav.main .has-sub > a.nav-link::after{content:"?";font-size:.7em;
  margin-left:.35rem;opacity:.6;}
nav.main .sub{position:absolute;top:100%;left:0;background:#fff;
  border:1px solid var(--grau-line);border-radius:8px;
  box-shadow:0 8px 24px rgba(90,57,33,.12);min-width:220px;padding:.4rem;
  display:none;flex-direction:column;z-index:60;}
nav.main .sub a{padding:.55rem .8rem;color:var(--braun);font-weight:500;
  border-radius:6px;font-size:.9rem;}
nav.main .sub a:hover{background:var(--orange-soft);color:var(--orange-dark);text-decoration:none;}

.burger{display:none;background:none;border:1px solid var(--grau-line);
  width:44px;height:44px;border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;color:var(--braun);margin-left:auto;}

/* Main + Layout */
main{max-width:var(--max);margin:0 auto;padding:2rem 1.25rem 3rem;}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start;}
.layout-single{max-width:800px;margin:0 auto;}

/* Hero */
.hero{background:linear-gradient(135deg, var(--orange-soft) 0%, var(--gruen-soft) 100%);
  border-bottom:1px solid var(--grau-line);}
.hero-inner{max-width:var(--max);margin:0 auto;padding:2.6rem 1.25rem 2.8rem;}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--gruen-dark);padding:.4rem .9rem;border-radius:999px;
  font-weight:600;font-size:.82rem;margin-bottom:1rem;
  box-shadow:0 1px 3px rgba(90,57,33,.06);}
.hero-badge::before{content:"?";color:var(--gruen);}
.hero h1{margin:0 0 .7rem;color:var(--braun);
  font-size:clamp(1.6rem, 2.4vw + 1rem, 2.2rem);line-height:1.2;letter-spacing:-.01em;}
.hero p{margin:0;color:var(--braun-soft);font-size:1.05rem;max-width:62ch;}

/* Section head */
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin:0 0 1.2rem;}
.section-head h2{margin:0;color:var(--braun);font-size:1.35rem;
  position:relative;padding-left:.9rem;letter-spacing:-.005em;}
.section-head h2::before{content:"";position:absolute;left:0;top:.25em;
  bottom:.25em;width:5px;background:var(--orange);border-radius:3px;}
.section-head .more{font-size:.9rem;font-weight:600;}

/* Beitragskarten */
.posts{display:grid;gap:1.25rem;}
.card{background:#fff;border:1px solid var(--grau-line);
  border-radius:14px;overflow:hidden;display:grid;
  grid-template-columns:250px 1fr;
  box-shadow:var(--shadow);
  transition:transform .18s, box-shadow .18s, border-color .18s;
  cursor:pointer;}
.card:hover{transform:translateY(-2px);
  box-shadow:var(--shadow-hover);border-color:#E0D9CF;}
.card-thumb{background:linear-gradient(135deg,var(--orange-soft),var(--gruen-soft));
  min-height:180px;display:flex;align-items:center;justify-content:center;
  color:var(--braun-soft);font-size:.85rem;border-right:1px solid var(--grau-line);}
.card-thumb img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:1.15rem 1.35rem 1.25rem;display:flex;flex-direction:column;}
.card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;}
.tag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  letter-spacing:.02em;padding:.22rem .65rem;border-radius:999px;text-transform:uppercase;}
.tag.cat{background:var(--orange-soft);color:var(--orange-dark);}
.tag.klasse{background:var(--gruen-soft);color:var(--gruen-dark);}
.tag.art-idee{background:#FFF4E0;color:#B26A00;}
.tag.art-erlebt{background:#EAF3D8;color:#4E7A1A;}
.card h3{margin:0 0 .45rem;font-size:1.12rem;line-height:1.3;color:var(--braun);letter-spacing:-.005em;}
.card h3 a{color:inherit;}
.card h3 a:hover{color:var(--orange-dark);text-decoration:none;}
.card p{margin:0 0 .9rem;color:#4A443F;font-size:.94rem;}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;
  align-items:center;font-size:.82rem;color:var(--braun-soft);
  padding-top:.65rem;border-top:1px dashed var(--grau-line);}
.card-foot .btn-mini{font-weight:600;}

/* Sidebar */
aside{display:flex;flex-direction:column;gap:1.25rem;}
.widget{background:#fff;border:1px solid var(--grau-line);
  border-radius:14px;padding:1.1rem 1.15rem;box-shadow:var(--shadow);}
.widget h3{margin:0 0 .8rem;font-size:1rem;color:var(--braun);
  display:flex;align-items:center;gap:.5rem;}
.widget h3::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--orange);}
.widget.kontakt h3::before{background:var(--gruen);}
.widget ul{list-style:none;margin:0;padding:0;font-size:.92rem;}
.widget ul li{padding:.4rem 0;border-bottom:1px dashed var(--grau-line);}
.widget ul li:last-child{border-bottom:none;}
.widget ul li strong{display:block;color:var(--braun);font-size:.85rem;}
.widget ul li span{color:#5A554F;font-size:.88rem;}

/* Responsive */
@media(max-width:960px){.layout{grid-template-columns:1fr;}}
@media(max-width:860px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--grau-line);
    box-shadow:0 8px 24px rgba(90,57,33,.12);padding:.5rem;}
  nav.main.open{display:block;}
  nav.main ul{flex-direction:column;gap:0;}
  nav.main .sub{position:static;display:flex;box-shadow:none;border:none;
    padding:0 0 0 1rem;background:transparent;}
  nav.main > ul > li.has-sub > a.nav-link::after{content:"";}
  .burger{display:flex;}
}
@media(max-width:640px){
  .card{grid-template-columns:1fr;}
  .card-thumb{min-height:150px;border-right:none;border-bottom:1px solid var(--grau-line);}
}

/* Footer (hell, Etappe 2) */
footer.site{background:#FBFAF7;color:#4A443F;margin-top:2.5rem;
  border-top:1px solid var(--grau-line);}
.foot-inner{max-width:var(--max);margin:0 auto;padding:2.2rem 1.25rem 1.2rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.8rem;}
footer.site h4{color:var(--braun);font-size:.9rem;margin:0 0 .7rem;
  text-transform:uppercase;letter-spacing:.06em;}
footer.site a{color:var(--braun-soft);}
footer.site a:hover{color:var(--orange-dark);}
footer.site ul{list-style:none;margin:0;padding:0;font-size:.9rem;}
footer.site ul li{padding:.2rem 0;}

.footer-stripe{height:2px;
  background:linear-gradient(90deg,
    rgba(240,138,42,.55) 0%,
    rgba(240,138,42,.55) 45%,
    rgba(140,191,63,.55) 55%,
    rgba(140,191,63,.55) 100%);}
.foot-bottom{padding:.9rem 1.25rem;text-align:center;font-size:.82rem;color:var(--braun-soft);}
.foot-bottom a{color:var(--braun-soft);}

/* Feiner Farbstreifen ganz oben am Header */
header.site{position:relative; background:#fff;
  border-bottom:1px solid var(--grau-line);}
header.site::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,
    rgba(240,138,42,.55) 0%,
    rgba(240,138,42,.55) 45%,
    rgba(140,191,63,.55) 55%,
    rgba(140,191,63,.55) 100%);}
.header-inner{padding-top:calc(1rem + 2px);}

/* Hero dezent warm */
.hero{
  background:linear-gradient(135deg, #FCF3E8 0%, #FBF6EC 45%, #F3F7E8 100%);
  border-bottom:1px solid var(--grau-line);
}

/* ============================================================
   edit-schlicht: Formular, Drop-Zonen, Buttons, Lightbox
   ============================================================ */

.edit-form{display:flex;flex-direction:column;gap:1.1rem;}
.form-block{background:#fff;border:1px solid var(--grau-line);border-radius:14px;
  padding:1.3rem 1.5rem;box-shadow:0 1px 3px rgba(90,57,33,.04);}
.form-field{display:block;margin:.2rem 0 1rem;}
.form-field:last-child{margin-bottom:0;}
.form-field-label{display:block;font-weight:600;color:var(--braun);
  margin-bottom:.35rem;font-size:.92rem;}

.form-field input[type=text],
.form-field input[type=email],
.form-field input:not([type]),
.form-field textarea,
.form-field select{
  width:100%;padding:.65rem .8rem;border:1px solid var(--grau-line);
  border-radius:8px;font:inherit;color:var(--text);background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.14);
}
.form-field textarea{resize:vertical;line-height:1.6;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1.05rem;border-radius:8px;font:inherit;font-weight:600;
  font-size:.92rem;line-height:1.2;border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;}
.btn.primary{background:var(--orange);color:#fff;}
.btn.primary:hover{background:var(--orange-dark);color:#fff;text-decoration:none;}
.btn.ghost{background:#fff;color:var(--braun);border-color:var(--grau-line);}
.btn.ghost:hover{border-color:var(--braun-soft);color:var(--orange-dark);text-decoration:none;}
.btn.small{padding:.4rem .8rem;font-size:.85rem;font-weight:500;}

.form-actions{display:flex;gap:.6rem;padding-top:.3rem;}

.upload-drop{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35rem;
  padding:1.6rem 1rem;border:2px dashed #D9CFC0;border-radius:12px;
  background:#FDFBF7;color:var(--braun-soft);text-align:center;
  cursor:pointer;transition:border-color .15s,background .15s;}
.upload-drop.small-drop{padding:1.1rem 1rem;}
.upload-drop:hover,.upload-drop.hover{border-color:var(--orange);background:var(--orange-soft);}
.upload-drop strong{color:var(--braun);font-weight:600;font-size:.95rem;}
.upload-drop span{font-size:.85rem;}
.upload-drop .upload-hint{font-size:.78rem;color:#A79A88;}
.upload-drop.has-file{border-color:var(--gruen);background:var(--gruen-soft);}
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

.file-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem;}
.file-name{color:var(--braun-soft);font-size:.9rem;}

.title-image-preview{position:relative;border-radius:12px;overflow:hidden;
  max-width:100%;aspect-ratio:16/9;background:#F0EDE7;}
.title-image-preview img{width:100%;height:100%;object-fit:cover;display:block;}

.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.7rem;margin-top:.6rem;}
.image-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:#F0EDE7;cursor:grab;
  border:1px solid var(--grau-line);
  transition:transform .12s, box-shadow .12s, border-color .12s;}
.image-item img{width:100%;height:100%;object-fit:cover;display:block;}
.image-item:hover{border-color:var(--orange);
  box-shadow:0 4px 12px rgba(240,138,42,.15);}
.image-item.dragging{opacity:.5;transform:scale(.97);}
.image-handle{position:absolute;left:5px;top:5px;
  background:rgba(255,255,255,.9);color:var(--braun);
  font-size:.85rem;line-height:1;padding:.2rem .35rem;border-radius:4px;
  cursor:grab;user-select:none;}
.image-x{position:absolute;right:5px;top:5px;
  background:rgba(192,57,43,.9);color:#fff;border:0;
  width:22px;height:22px;line-height:1;padding:0;border-radius:50%;
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .15s;}
.image-x:hover{background:#A02617;}

/* Lightbox (Basis) */
.lightbox{position:fixed;inset:0;background:rgba(20,15,10,.9);
  display:flex;align-items:center;justify-content:center;z-index:2000;
  padding:2rem;cursor:zoom-out;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:min(90vw,1400px);max-height:90vh;
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{position:absolute;top:16px;right:22px;
  background:rgba(255,255,255,.15);border:0;color:#fff;
  font-size:1.6rem;width:42px;height:42px;border-radius:50%;
  cursor:pointer;line-height:1;font-family:inherit;
  transition:background .15s;}
.lightbox-close:hover{background:rgba(255,255,255,.28);}

.muted{color:#8A6A50;}
.small{font-size:.85rem;}

/* ============================================================
   header-search (fein, integriert)
   ============================================================ */
.header-search{position:relative;display:flex;align-items:center;
  background:#fff;border:1px solid var(--grau-line);border-radius:999px;
  padding:0 .3rem 0 .9rem;height:38px;width:220px;
  transition:border-color .15s, box-shadow .15s, background .15s;}
.header-search:focus-within{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.12);}
.header-search input{border:0;background:transparent;outline:none;
  font:inherit;font-size:.88rem;width:100%;color:var(--text);padding:.35rem 0;}
.header-search input::placeholder{color:#A79A88;}
.header-search button{background:none;border:0;cursor:pointer;
  color:var(--braun-soft);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,color .15s;}
.header-search button:hover{color:#fff;background:var(--orange);}
@media(max-width:1100px){.header-search{width:170px;}}
@media(max-width:1000px){.header-search{width:44px;padding:0;justify-content:center;}
  .header-search input{display:none;}}
@media(max-width:860px){.header-search{display:none;}}

/* ============================================================
   editor-styles (WYSIWYG)
   ============================================================ */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:.2rem;padding:.4rem;
  background:#F7F4EE;border:1px solid var(--grau-line);border-bottom:0;
  border-radius:10px 10px 0 0;align-items:center;}
.editor-toolbar button{background:#fff;border:1px solid var(--grau-line);
  border-radius:6px;padding:.3rem;font:inherit;color:var(--braun);
  cursor:pointer;min-width:30px;height:30px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, border-color .12s, color .12s;}
.editor-toolbar button:hover{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-dark);}
.editor-toolbar button:active{background:var(--orange);color:#fff;border-color:var(--orange-dark);}
.editor-toolbar .sep{width:1px;height:20px;background:var(--grau-line);margin:0 .25rem;}
.editor-surface{min-height:220px;padding:1rem 1.1rem;background:#fff;
  border:1px solid var(--grau-line);border-radius:0 0 10px 10px;
  font:inherit;line-height:1.7;color:var(--text);outline:none;
  transition:border-color .15s, box-shadow .15s;}
.editor-surface:focus{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.12);}
.editor-surface:empty::before{content:attr(data-placeholder);
  color:#A79A88;pointer-events:none;}
.editor-surface h2{color:var(--braun);font-size:1.25rem;margin:.9rem 0 .5rem;}
.editor-surface p{margin:0 0 .8rem;}
.editor-surface ul,.editor-surface ol{margin:0 0 .8rem 1.4rem;}
.editor-surface a{color:var(--orange-dark);text-decoration:underline;}
.editor-hint{font-size:.8rem;color:#A79A88;margin:.45rem 0 0;}

.post-content h2{color:var(--braun);font-size:1.25rem;margin:1.4rem 0 .5rem;}
.post-content p{margin:0 0 .9rem;}
.post-content ul,.post-content ol{margin:0 0 .9rem 1.4rem;}
.post-content a{color:var(--orange-dark);text-decoration:underline;}

/* admin-nav */
.admin-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;margin:0 0 1.2rem;}
.admin-head h1{margin:0;color:var(--braun);font-size:1.5rem;letter-spacing:-.01em;}

.admin-subhead{margin:0 0 .8rem;color:var(--braun);font-size:1rem;font-weight:600;}

.admin-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;}
.admin-nav-item{display:inline-flex;align-items:center;
  padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:.9rem;
  background:#fff;color:var(--braun);border:1px solid var(--grau-line);
  text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.admin-nav-item:hover{background:var(--orange-soft);color:var(--orange-dark);
  border-color:var(--orange);text-decoration:none;}
.admin-nav-item.active{background:var(--orange);color:#fff;border-color:var(--orange-dark);}

.admin-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:start;}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr;}}

.admin-card{background:#fff;border:1px solid var(--grau-line);
  border-radius:14px;padding:1.4rem 1.6rem;
  box-shadow:0 1px 3px rgba(90,57,33,.04);}

.admin-list{background:#fff;border:1px solid var(--grau-line);
  border-radius:12px;overflow:hidden;}
.admin-list-row{display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--grau-line);}
.admin-list-row:last-child{border-bottom:none;}
.admin-list-row.dim{opacity:.5;}
.admin-list-main{flex:1;min-width:0;}
.admin-list-main strong{color:var(--braun);display:block;}
.admin-list-main small{color:#8A6A50;font-size:.85rem;}
.admin-list-thumb{width:42px;height:42px;object-fit:cover;border-radius:8px;flex-shrink:0;}

.admin-table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--grau-line);border-radius:12px;overflow:hidden;}
.admin-table thead tr{background:#F6EFE6;}
.admin-table th{text-align:left;color:var(--braun);font-weight:600;
  padding:.7rem 1rem;font-size:.9rem;}
.admin-table td{padding:.7rem 1rem;border-top:1px solid var(--grau-line);}
.admin-table a{color:var(--orange-dark);}

.icon-btn{background:none;border:0;cursor:pointer;color:var(--braun);
  font-size:.75rem;padding:.3rem;border-radius:4px;}
.icon-btn:hover{background:var(--orange-soft);color:var(--orange-dark);}

.link-btn{background:none;border:0;cursor:pointer;color:var(--orange-dark);
  font:inherit;font-size:.88rem;padding:0;text-decoration:none;}
.link-btn:hover{text-decoration:underline;}
.link-btn.danger{color:#C0392B;}

.inline-form{display:inline-flex;gap:.4rem;align-items:center;}
.inline-input{padding:.35rem .55rem;border:1px solid var(--grau-line);
  border-radius:6px;font:inherit;font-size:.85rem;width:140px;}

.notice{background:#F0F7E3;border-left:4px solid var(--gruen);
  padding:.8rem 1rem;border-radius:8px;}
.notice.error{background:#FDE9E9;border-left-color:#C0392B;}

.checkbox-row{display:flex;align-items:center;gap:.6rem;margin:.9rem 0;}

.editor-switch{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.5rem;}
.switch-buttons{display:inline-flex;background:#F0EDE7;border-radius:999px;
  padding:.15rem;}
.switch-btn{background:transparent;border:0;padding:.35rem .9rem;border-radius:999px;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--braun-soft);
  cursor:pointer;transition:background .15s,color .15s;}
.switch-btn.active{background:#fff;color:var(--braun);box-shadow:0 1px 3px rgba(90,57,33,.1);}
.switch-btn:hover:not(.active){color:var(--orange-dark);}

.editor-source{width:100%;min-height:220px;padding:1rem 1.1rem;
  border:1px solid var(--grau-line);border-radius:0 0 10px 10px;
  font-family:ui-monospace, 'Cascadia Code', 'Menlo', monospace;
  font-size:.9rem;line-height:1.6;resize:vertical;color:var(--text);
  background:#FCFCFA;}
.editor-source:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.12);}

.back-link{margin:0 0 1rem;font-size:.9rem;}
.back-link a{color:var(--braun-soft);}
.back-link a:hover{color:var(--orange-dark);}

/* hero-compact */
.hero.hero-compact{
  background:linear-gradient(135deg, #FDF3E2 0%, #FBF6E9 45%, #F2F6E4 100%);
  border-bottom:0;
  box-shadow: inset 0 -2px 0 var(--orange);
}
.hero.hero-compact .hero-inner{max-width:var(--max);margin:0 auto;
  padding:.9rem 1.25rem 1rem;}
.hero.hero-compact h1{margin:0 0 .2rem;color:var(--braun);
  font-size:clamp(1.15rem, 1.2vw + 1rem, 1.45rem);line-height:1.2;letter-spacing:-.005rem;}
.hero.hero-compact p{margin:0;color:var(--braun-soft);font-size:.92rem;max-width:70ch;}

/* header-admin (Zahnrad) */
.header-admin{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;color:var(--braun-soft);
  border:1px solid var(--grau-line);background:#fff;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s, transform .25s;}
.header-admin:hover{color:var(--orange-dark);border-color:var(--orange);
  background:var(--orange-soft);text-decoration:none;transform:rotate(45deg);}
@media(max-width:860px){.header-admin{display:none;}}

/* post-main (Beitragsseite) */
.post-main{padding-top:2rem;}
.post-title{color:var(--braun);font-size:clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height:1.2;margin:.2rem 0 1rem;letter-spacing:-.01em;}
.breadcrumb{margin:0 0 .6rem;font-size:.85rem;color:#8A6A50;}
.breadcrumb a{color:#8A6A50;}
.breadcrumb a:hover{color:var(--orange-dark);}

.post-content{font-size:1.03rem;color:#2E2A26;line-height:1.75;}
.post-content h2{color:var(--braun);font-size:1.25rem;margin:1.4rem 0 .5rem;}
.post-content p{margin:0 0 .9rem;}
.post-content ul,.post-content ol{margin:0 0 .9rem 1.4rem;}
.post-content a{color:var(--orange-dark);text-decoration:underline;}

.post-float-image{float:right;width:min(340px, 40%);
  margin:0 0 1rem 1.4rem;border-radius:12px;cursor:zoom-in;
  box-shadow:0 2px 6px rgba(90,57,33,.08);}
@media(max-width:640px){
  .post-float-image{float:none;width:100%;margin:0 0 1rem 0;max-width:none;}
}

.post-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.8rem;margin:1.8rem 0;}
.post-gallery img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;
  width:100%;cursor:zoom-in;}

.post-attachment{margin:1.8rem 0 .4rem;font-weight:600;}
.post-meta{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--grau-line);
  font-size:.88rem;color:#8A6A50;}
.post-meta p{margin:.2rem 0;}

/* ============================================================
   form-inputs-clean
   ============================================================ */
.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=password],
.form-field input[type=number],
.form-field input[type=date],
.form-field input[type=search],
.form-field input:not([type]),
.form-field textarea,
.form-field select,
.pwd-input,
.inline-input{
  width:100%;
  min-height:42px;
  padding:.6rem .85rem;
  border:1px solid var(--grau-line);
  border-radius:10px;
  font:inherit;
  font-size:.95rem;
  color:var(--text);
  background:#fff;
  line-height:1.4;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance:none;
  appearance:none;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.pwd-input:focus,
.inline-input:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.14);
  background:#fff;
}

.form-field textarea{min-height:auto;}

.form-field input[type=date]{
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A3921' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px;
}
.form-field input[type=date]::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:0;
  width:2.4rem;
  height:100%;
  cursor:pointer;
}

.form-field input[type=number]{ -moz-appearance:textfield; }
.form-field input[type=number]::-webkit-outer-spin-button,
.form-field input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

.checkbox-row input[type=checkbox]{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border:1.5px solid var(--grau-line);
  border-radius:5px;
  background:#fff;
  cursor:pointer;
  position:relative;
  flex-shrink:0;
  transition:border-color .15s, background .15s;
}
.checkbox-row input[type=checkbox]:hover{ border-color:var(--orange); }
.checkbox-row input[type=checkbox]:checked{
  background:var(--orange);
  border-color:var(--orange);
}
.checkbox-row input[type=checkbox]:checked::after{
  content:"";
  position:absolute;
  left:4px; top:1px;
  width:6px; height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.checkbox-row input[type=checkbox]:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(240,138,42,.2);
}

.pwd-reset-form{ display:flex; gap:.5rem; align-items:center; margin:0; }
.pwd-input{ min-width:180px; }
.pwd-reset-form .btn.small{ flex-shrink:0; }

.form-field select{
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A3921' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:14px;
  cursor:pointer;
}

/* widget-image */
.widget-image{display:block;width:calc(100% + 2.3rem);margin:-1.1rem -1.15rem .8rem;
  border-radius:14px 14px 0 0;object-fit:contain;background:#F7F4EE;}
.widget-link{margin:.6rem 0 0;font-weight:600;}

.widget-image-only{padding:0;overflow:hidden;}
.widget-image-only img{display:block;width:100%;height:auto;border-radius:14px;}

.file-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.3rem;}
.file-row .btn.ghost.small{padding:.5rem 1rem;font-size:.88rem;}
.file-row .file-name{color:var(--braun-soft);font-size:.88rem;}

/* ============================================================
   Infinite Scroll (Etappe 4a)
   ============================================================ */

.posts-loader {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.6rem 0 1rem;
  color: var(--braun-soft);
  font-size: .92rem;
}
.posts-loader.active { display: flex; }

.posts-loader .spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--orange-soft);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: posts-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes posts-spin {
  to { transform: rotate(360deg); }
}

.posts-end {
  text-align: center;
  padding: 1.4rem 0 .4rem;
  color: #A79A88;
  font-size: .88rem;
}
.posts-end::before {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin: 0 auto .8rem;
  background: var(--grau-line);
  border-radius: 2px;
}

.card.fade-in {
  opacity: 0;
  transform: translateY(14px);
  animation: card-fade-in .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes card-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

#posts-marker {
  height: 1px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
/* Karte klickbar: Cursor als Hinweis */
.card { cursor: pointer; }
/* Lightbox erweitert */
.lightbox-frame{max-width:min(90vw,1400px);max-height:90vh;display:flex;align-items:center;justify-content:center;}
.lightbox img{max-width:100%;max-height:90vh;cursor:zoom-out;user-select:none;-webkit-user-drag:none;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.15);border:0;color:#fff;font-size:1.4rem;
  width:46px;height:46px;border-radius:50%;cursor:pointer;line-height:1;
  font-family:inherit;transition:background .15s;z-index:2;}
.lightbox-nav:hover{background:rgba(255,255,255,.28);}
.lightbox-prev{left:18px;}
.lightbox-next{right:18px;}
.lightbox-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.85);font-size:.85rem;background:rgba(0,0,0,.35);
  padding:.3rem .8rem;border-radius:999px;letter-spacing:.04em;z-index:2;}
@media(max-width:640px){
  .lightbox-nav{width:40px;height:40px;font-size:1.1rem;}
  .lightbox-prev{left:8px;}.lightbox-next{right:8px;}
  .lightbox-counter{bottom:12px;font-size:.78rem;}
}
/* Duenner Sticky-Footer */
.footer-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #FBFAF7;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg,
    rgba(240,138,42,.55) 0%,
    rgba(240,138,42,.55) 45%,
    rgba(140,191,63,.55) 55%,
    rgba(140,191,63,.55) 100%) 1;
  font-size: .82rem;
  color: var(--braun-soft);
}
.footer-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bar-links a {
  color: var(--braun-soft);
  margin-left: 1rem;
}
.footer-bar-links a:hover { color: var(--orange-dark); }

/* Platz unten, damit Inhalt nicht unter Footer rutscht */
body { padding-bottom: 42px; }

@media (max-width: 480px) {
  .footer-bar-inner { justify-content: center; text-align: center; }
  .footer-bar-links a { margin: 0 .5rem; }
}
/* Widget-Text mit Mini-Formatierung */
.widget-text {
  color: #4A443F;
  font-size: .93rem;
  line-height: 1.55;
}
.widget-text p {
  margin: 0 0 .45rem;
}
.widget-text p:last-child {
  margin-bottom: 0;
}
.widget-text h4.wi-h1 {
  font-size: 1.02rem;
  margin: 0 0 .4rem;
  color: var(--braun);
  line-height: 1.35;
}
.widget-text h5.wi-h2 {
  font-size: .96rem;
  margin: .1rem 0 .35rem;
  color: var(--braun);
  line-height: 1.35;
}
.widget-text h6.wi-h3 {
  font-size: .9rem;
  margin: .1rem 0 .3rem;
  color: var(--braun);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
}
.widget-text ul {
  margin: .2rem 0 .45rem 1.1rem;
  padding: 0;
}
.widget-text ul li {
  padding: .05rem 0;
  border-bottom: none;
  line-height: 1.5;
}
.widget-text strong { color: var(--braun); }
.widget-text a { color: var(--orange-dark); text-decoration: underline; }
.widget-text .wi-center { text-align: center; }
.widget-text .wi {
  display: inline-block;
  vertical-align: -2px;
  margin-right: .35rem;
  color: var(--orange);
}

/* Etwas mehr Padding in Widget-Text, damit Icons nicht kleben */
.widget { padding: 1.15rem 1.25rem; }
/* Formatierungshilfe unter Textareas */
.md-help {
  margin-top: .6rem;
  background: #FBF8F2;
  border: 1px solid var(--grau-line);
  border-radius: 10px;
  padding: 0;
  font-size: .85rem;
}
.md-help > summary {
  padding: .55rem .9rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--braun);
  list-style: none;
  user-select: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.md-help > summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
}
.md-help[open] > summary {
  border-bottom: 1px solid var(--grau-line);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.md-help > summary::-webkit-details-marker { display: none; }

.md-help-body { padding: .8rem 1rem 1rem; }

.md-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.md-help-table th {
  text-align: left;
  color: var(--braun);
  font-weight: 600;
  padding: .3rem .4rem;
  border-bottom: 1px solid var(--grau-line);
}
.md-help-table td {
  padding: .3rem .4rem;
  border-bottom: 1px dashed var(--grau-line);
  vertical-align: top;
}
.md-help-table tr:last-child td { border-bottom: none; }
.md-help-table code {
  background: #F0EDE7;
  color: var(--braun);
  padding: .12rem .35rem;
  border-radius: 4px;
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: .82rem;
  white-space: nowrap;
}

.md-help-example { margin: 1rem 0 .3rem; color: var(--braun); }
.md-help-pre {
  margin: 0;
  background: #fff;
  border: 1px solid var(--grau-line);
  border-radius: 8px;
  padding: .7rem .9rem;
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  overflow-x: auto;
}
/* Widget-Vorschau im Admin */
.widget-preview {
  margin-top: .8rem;
  background: #FBF8F2;
  border: 1px solid var(--grau-line);
  border-radius: 10px;
  overflow: hidden;
}
.widget-preview-head {
  padding: .45rem .9rem;
  background: #F0EDE7;
  color: var(--braun);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--grau-line);
}
.widget-preview-body {
  padding: 1rem 1.1rem;
}
.widget-preview-body .widget-text {
  font-size: .93rem;
  color: #4A443F;
}
.widget-preview-body .muted {
  color: #A79A88;
  font-style: italic;
}
/* Menuepunkt ohne eigenen Link: dezentes Fragezeichen */
nav.main a.nav-link .qlink,
nav.main .sub a .qlink {
  display: inline-block;
  margin-left: .35rem;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-soft);
  border-radius: 50%;
  vertical-align: 2px;
  opacity: .75;
}

/* Aktiver Top-Level-Punkt: kraeftiger */
nav.main a.nav-link.active {
  background: var(--orange-soft);
  color: var(--orange-dark);
}

/* Submenue: mehr Struktur */
nav.main .sub {
  padding: .45rem;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(90,57,33,.14);
}
nav.main .sub a {
  padding: .5rem .75rem;
  border-radius: 7px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
nav.main .sub a:hover { background: var(--orange-soft); color: var(--orange-dark); }

/* Mobile-Menue aufpolieren */
@media (max-width: 860px) {
  nav.main {
    padding: .6rem;
    border-bottom: 1px solid var(--grau-line);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
  nav.main ul {
    gap: .15rem;
  }
  nav.main > ul > li {
    border-bottom: 1px solid var(--grau-line);
  }
  nav.main > ul > li:last-child { border-bottom: none; }
  nav.main a.nav-link {
    padding: .8rem .6rem;
    font-size: 1rem;
    border-radius: 0;
  }
  nav.main .sub {
    padding: .2rem 0 .4rem 1rem;
  }
  nav.main .sub a {
    padding: .55rem .5rem;
    border-radius: 6px;
    font-size: .93rem;
  }
}
.menu-badge {
  display: inline-block;
  margin-left: .4rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--gruen-soft);
  color: var(--gruen-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: 1px;
}
/* Menue-Submenue sanft einblenden */
nav.main .sub {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  visibility: hidden;
}
nav.main .has-sub:hover .sub,
nav.main .has-sub:focus-within .sub {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  display: flex;
}

/* Mobile: Burger-Menue einblenden */
@media (max-width: 860px) {
  nav.main {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }
  nav.main.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: block;
  }
}
/* Menuepunkt ohne Link: sieht aus wie Link, ist aber keiner */
nav.main span.nav-link.no-link {
  display: block;
  padding: .65rem .95rem;
  color: var(--braun);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 8px;
  cursor: default;
  transition: background .15s, color .15s;
}
nav.main span.nav-link.no-link:hover {
  background: var(--orange-soft);
  color: var(--orange-dark);
}
nav.main .sub span.no-link {
  padding: .5rem .75rem;
  color: var(--braun);
  border-radius: 7px;
  font-size: .9rem;
  display: flex;
  align-items: center;
  cursor: default;
}
/* Seiten-Verwaltung: kompakte Liste, breites Formular */
.admin-grid-pages {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .admin-grid-pages { grid-template-columns: 1fr; }
}

/* Kompakte Admin-Zeile */
.admin-list-row.compact {
  padding: .55rem .8rem;
  gap: .5rem;
}
.admin-list-row.compact .admin-list-main strong {
  display: block;
  color: var(--braun);
  font-size: .95rem;
  line-height: 1.3;
}
.admin-list-row.compact .admin-list-main small {
  display: block;
  color: #8A6A50;
  font-size: .78rem;
  line-height: 1.3;
  margin-top: .1rem;
}

/* Icon-Buttons in Listenzeilen */
.row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--braun-soft);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
}
.row-icon:hover {
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-color: var(--orange-soft);
  text-decoration: none;
}
.row-icon.danger:hover {
  background: #FDE9E9;
  color: #C0392B;
  border-color: #F5C9C9;
}
.row-icon svg { display: block; }
/* Bestaetigungs-Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,15,10,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 1.5rem;
  animation: modal-fade .18s ease-out;
}
.modal-backdrop[hidden] { display: none; }
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 1.6rem 1.7rem 1.3rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(90,57,33,.25);
  animation: modal-pop .22s cubic-bezier(.2,.8,.3,1.05);
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
  background: var(--orange-soft);
  color: var(--orange-dark);
}
.modal-icon.danger {
  background: #FDE9E9;
  color: #C0392B;
}
.modal-box h3 {
  margin: 0 0 .4rem;
  color: var(--braun);
  font-size: 1.15rem;
}
.modal-box p {
  margin: 0 0 1.2rem;
  color: #4A443F;
  font-size: .94rem;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}
.btn.danger {
  background: #C0392B;
  color: #fff;
  border-color: #C0392B;
}
.btn.danger:hover {
  background: #A02617;
  color: #fff;
  border-color: #A02617;
  text-decoration: none;
}
/* Intern-Hinweis bei versteckten Beitraegen */
.post-hidden-hint {
  background: #FFF4E0;
  border-left: 4px solid var(--orange);
  color: #6A4A1E;
  padding: .6rem .9rem;
  border-radius: 8px;
  font-size: .92rem;
  margin: 0 0 1rem;
}
/* Suche: markierter Suchbegriff im Snippet */
.search-posts .snippet { color: #4A443F; }
.search-posts .snippet mark {
  background: #FDE9B9;
  color: var(--braun);
  padding: 0 .15em;
  border-radius: 3px;
  font-weight: 600;
}
/* ==== UPDATE-PAKET 4 ==== */

/* ---------- Hero schlanker ---------- */
.hero.hero-compact .hero-inner{
  padding: .8rem 1.25rem .9rem;
  max-width: var(--max);
}
.hero.hero-compact h1{
  font-size: clamp(1.1rem, 1.1vw + 0.95rem, 1.35rem);
  margin: 0 0 .15rem;
  line-height: 1.25;
}
.hero.hero-compact p{
  font-size: .9rem;
  line-height: 1.45;
  max-width: none;
}

/* ---------- Menue leichter, eleganter ---------- */
nav.main ul{ gap: .1rem; }
nav.main a.nav-link{
  padding: .5rem .85rem;
  font-weight: 500;
  font-size: .93rem;
  letter-spacing: .005em;
  color: #3B2B1C;
  border-radius: 999px;
  position: relative;
  transition: background .15s, color .15s;
}
nav.main a.nav-link:hover{
  background: rgba(240,138,42,.10);
  color: var(--orange-dark);
  text-decoration: none;
}
nav.main a.nav-link.active{
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 600;
}
/* Aktiver Punkt: kleiner Farb-Strich darunter */
nav.main a.nav-link.active::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
nav.main span.nav-link.no-link{
  padding: .5rem .85rem;
  font-weight: 500;
  font-size: .93rem;
  color: #3B2B1C;
  border-radius: 999px;
}
nav.main span.nav-link.no-link:hover{
  background: rgba(240,138,42,.10);
  color: var(--orange-dark);
}
nav.main .has-sub > a.nav-link::after,
nav.main .has-sub > span.nav-link::after{
  /* Ueberschreiben: kein Doppel-Pfeil, wir machen den aktiven Strich nur auf aktive */
}

/* ---------- Footer-Bar: kein Balken doppelt, dezenter ---------- */
.footer-bar{ background: rgba(251,250,247,.96); backdrop-filter: blur(6px); }
.footer-bar-inner{ padding: .45rem 1.25rem; }

/* ---------- Beitrag ohne Titelbild: schoener Platzhalter ---------- */
.card-thumb-placeholder{
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(90,57,33,.28);
  background:
    radial-gradient(circle at 30% 25%, rgba(240,138,42,.18), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(140,191,63,.20), transparent 55%),
    linear-gradient(135deg, var(--orange-soft), var(--gruen-soft));
}
.card-thumb-placeholder img{
  max-width: 56%;
  max-height: 60%;
  width: auto;
  height: auto;
  opacity: .55;
  filter: saturate(.6);
}

/* ---------- Lightbox auf dem Handy ohne Pfeile ---------- */
@media (max-width: 640px){
  .lightbox-nav{ display: none !important; }
  .lightbox-counter{
    bottom: 10px;
    font-size: .78rem;
    padding: .3rem .75rem;
  }
  .lightbox-counter::before{
    content: "Wischen zum Bl\u00e4ttern \00b7 ";
    opacity: .85;
    margin-right: .25rem;
  }
}
/* Aktiver Menuepunkt ohne Link (Span) */
nav.main span.nav-link.no-link.active {
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 600;
}
/* ==== AKTIVER-SPAN-FIX ==== */
nav.main span.nav-link.no-link { position: relative; }
nav.main span.nav-link.no-link.active {
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-weight: 600;
}
nav.main span.nav-link.no-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}
/* ==== UPDATE-PAKET 5 ==== */
/* Admin-Filterzeile */
.admin-filter{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-bottom:1.2rem;
  flex-wrap:wrap;
}
.admin-filter input[type=search]{
  flex:1;
  min-width:220px;
  min-height:42px;
  padding:.55rem .85rem;
  border:1px solid var(--grau-line);
  border-radius:10px;
  font:inherit;
  font-size:.95rem;
  background:#fff;
}
.admin-filter input[type=search]:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(240,138,42,.14);
}
/* ==== UPDATE-PAKET 6 ==== */
/* Karten mit kurzem Anriss: Body vertikal zentrieren */
.card.card-compact-body .card-body{
  justify-content: center;
}
.card.card-compact-body .card-body h3{
  margin-top: 0;
}
.card.card-compact-body .card-foot{
  margin-top: .8rem;
}

/* Karte behaelt ihre feste Mindesthoehe (vom .card-thumb min-height 180px) */
/* ==== UPDATE-PAKET 7 ==== */
/* Feste Kartenhoehe: Bild nimmt genau 180px ein, nicht mehr, nicht weniger */
.card .card-thumb{
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  overflow: hidden;
}
.card .card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card .card-thumb-placeholder{
  height: 100%;
  min-height: 0;
}
@media (max-width: 640px){
  .card .card-thumb{
    height: 180px;
    min-height: 180px;
    max-height: 180px;
  }
}
/* ==== UPDATE-PAKET 8 ==== */
/* Platzhalter (kein Titelbild): Logo sauber skalieren und zentrieren */
.card .card-thumb .card-thumb-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card .card-thumb .card-thumb-placeholder img{
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 55%;
  object-fit: contain;
  opacity: .55;
  filter: saturate(.6);
}
/* ==== UPDATE-PAKET 9 ==== */
/* Zurueck-Button auf Beitrags- und Seiten-Detailseiten */
.back-button{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  background: #fff;
  color: var(--braun);
  border: 1px solid var(--grau-line);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  text-decoration: none;
  line-height: 1.2;
}
.back-button:hover{
  background: var(--orange-soft);
  color: var(--orange-dark);
  border-color: var(--orange);
  text-decoration: none;
}
.back-button:active{
  transform: translateY(1px);
}
.back-button svg{
  display: block;
  flex-shrink: 0;
}
.breadcrumb .back-button{
  margin: 0 0 .3rem;
}
/* ==== UPDATE-PAKET 10 ==== */

/* ----- Header: Logout-Button ----- */
.header-user{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}
.header-logout{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--braun-soft);
  border: 1px solid var(--grau-line);
  background: #fff;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.header-logout:hover{
  color: #C0392B;
  border-color: #F5C9C9;
  background: #FDE9E9;
  text-decoration: none;
}
@media(max-width:860px){
  .header-user{ display: none; }
}

/* ----- Login-Seite ----- */
.login-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 3rem;
  min-height: calc(100vh - 260px);
}
.login-card{
  background: #fff;
  border: 1px solid var(--grau-line);
  border-radius: 20px;
  padding: 2.2rem 2.4rem 1.8rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(90,57,33,.05), 0 20px 48px rgba(90,57,33,.08);
  position: relative;
  overflow: hidden;
}
.login-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--orange) 0%,
    var(--orange) 45%,
    var(--gruen) 55%,
    var(--gruen) 100%);
}
.login-head{
  text-align: center;
  margin-bottom: 1.4rem;
}
.login-head img{
  height: 60px;
  width: auto;
  margin: 0 auto .8rem;
  display: block;
}
.login-head h1{
  margin: 0 0 .25rem;
  color: var(--braun);
  font-size: 1.45rem;
  letter-spacing: -.01em;
}
.login-sub{
  margin: 0;
  color: var(--braun-soft);
  font-size: .9rem;
}
.login-error{
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #FDE9E9;
  color: #8B1A1A;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1rem;
  border-left: 3px solid #C0392B;
}
.login-error svg{
  flex-shrink: 0;
}
.login-form{
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.login-field{
  display: block;
}
.login-field span{
  display: block;
  font-weight: 600;
  color: var(--braun);
  font-size: .88rem;
  margin-bottom: .3rem;
}
.login-field input{
  width: 100%;
  min-height: 44px;
  padding: .6rem .85rem;
  border: 1px solid var(--grau-line);
  border-radius: 10px;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus{
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240,138,42,.14);
}
.login-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .75rem 1rem;
  margin-top: .4rem;
  border: 0;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.login-submit:hover{
  background: var(--orange-dark);
}
.login-submit:active{
  transform: translateY(1px);
}
.login-submit svg{
  display: block;
}
.login-foot{
  margin: 1.4rem 0 0;
  text-align: center;
  font-size: .88rem;
}
.login-foot a{
  color: var(--braun-soft);
}
.login-foot a:hover{
  color: var(--orange-dark);
}
/* ==== UPDATE-PAKET 11 ==== */
/* Autoren-Zuweisung: huebsche Karten statt Standard-Selects */

.author-assign-list{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 1.4rem;
}

.author-card{
  background: #fff;
  border: 1px solid var(--grau-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.author-card:hover{
  border-color: #E0D9CF;
  box-shadow: 0 2px 6px rgba(90,57,33,.04);
}

.author-card-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
}
.author-name-block{
  flex: 1;
  min-width: 0;
}
.author-name-block strong{
  display: block;
  color: var(--braun);
  font-size: 1rem;
  line-height: 1.3;
}
.author-name-block small{
  display: block;
  color: #8A6A50;
  font-size: .82rem;
  margin-top: .15rem;
}
.warn-dot,
.ok-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: .15rem;
}
.warn-dot{ background: #E0A03A; }
.ok-dot{ background: var(--gruen); }

.author-pick-toggle{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  border: 1px solid transparent;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  max-width: 260px;
  min-width: 160px;
  justify-content: space-between;
}
.author-pick-toggle:hover{
  background: #FBE4CB;
  border-color: var(--orange);
}
.author-pick-toggle.open svg{
  transform: rotate(180deg);
}
.author-pick-toggle svg{
  transition: transform .18s ease;
  flex-shrink: 0;
}
.picked-label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auswahl-Panel */
.author-pick-panel{
  border-top: 1px solid var(--grau-line);
  background: #FBF8F2;
  padding: .55rem;
  display: grid;
  gap: .3rem;
  max-height: 320px;
  overflow-y: auto;
}

.user-pick{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .75rem;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
  width: 100%;
}
.user-pick:hover{
  background: var(--orange-soft);
  border-color: var(--orange-soft);
}
.user-pick:active{
  transform: scale(.995);
}
.user-pick.selected{
  background: var(--gruen-soft);
  border-color: var(--gruen);
}
.user-pick.selected-none{
  background: #F0EDE7;
  border-color: var(--grau-line);
}

.user-pick-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.user-pick-avatar.none{
  background: #D9CFC0;
  color: #fff;
}

.user-pick-body{
  flex: 1;
  min-width: 0;
}
.user-pick-body strong{
  display: block;
  color: var(--braun);
  font-size: .95rem;
  line-height: 1.25;
}
.user-pick-body small{
  display: block;
  color: #8A6A50;
  font-size: .8rem;
}

.user-pick-check{
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-pick.selected .user-pick-check{
  display: inline-flex;
}

.assign-actions{
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
}

/* Mobile Anpassung */
@media (max-width: 640px){
  .author-card-head{
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .author-pick-toggle{
    max-width: none;
    width: 100%;
  }
}
/* ==== UPDATE-PAKET 13 ==== */
.login-info{
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #FDF1E3;
  color: #6A4A1E;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--orange);
}
.login-info svg{ flex-shrink: 0; }

.pw-rules{
  font-size: .82rem;
  color: #8A6A50;
  margin: -.2rem 0 .4rem;
}

.pw-status{
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.pw-status.pending{
  background: #FFF4E0;
  color: #B26A00;
}
.pw-status.ok{
  background: var(--gruen-soft);
  color: var(--gruen-dark);
}
/* ==== UPDATE-PAKET 14 ==== */
/* Modal-Icon warn (gelb) */
.modal-icon.warn{
  background: #FFF4E0;
  color: #B26A00;
}
.modal-icon.danger{
  background: #FDE9E9;
  color: #C0392B;
}

/* Buttons im Modal: etwas groesser */
.modal-actions .btn{
  min-width: 100px;
  justify-content: center;
}
/* ==== UPDATE-PAKET 15 ==== */

/* ---- Back-Button kraeftiger ---- */
.back-button{
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange-dark);
  font-weight: 700;
  padding: .5rem 1.05rem;
  box-shadow: 0 2px 6px rgba(240,138,42,.25);
}
.back-button:hover{
  background: var(--orange-dark);
  color: #fff;
  border-color: var(--orange-dark);
  box-shadow: 0 4px 12px rgba(240,138,42,.35);
  transform: translateY(-1px);
}
.back-button svg{
  stroke: currentColor;
}

/* ---- Mobile Suche: nur auf Mobile sichtbar ---- */
.mobile-search-item{
  display: none;
  padding: .6rem .3rem .3rem;
  border-top: 1px solid var(--grau-line);
  margin-top: .5rem;
  list-style: none;
}
.mobile-search{
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--grau-line);
  border-radius: 999px;
  padding: .15rem .3rem .15rem .9rem;
  height: 44px;
}
.mobile-search input{
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  padding: .35rem 0;
  min-width: 0;
}
.mobile-search input::placeholder{ color: #A79A88; }
.mobile-search button{
  background: var(--orange);
  border: 0;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.mobile-search button:hover{ background: var(--orange-dark); }

@media (max-width: 860px){
  .mobile-search-item{ display: block; }
}

/* ---- Footer: Farbstreifen als Element (statt border-image) ---- */
.footer-bar{
  border-top: none !important;
  border-image: none !important;
  background: #FBFAF7;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.footer-bar-stripe{
  height: 2px;
  background: linear-gradient(90deg,
    rgba(240,138,42,.75) 0%,
    rgba(240,138,42,.75) 45%,
    rgba(140,191,63,.75) 55%,
    rgba(140,191,63,.75) 100%);
}
.footer-bar-inner{
  padding: .5rem 1.25rem;
}
@media (max-width: 480px){
  .footer-bar-inner{
    padding: .45rem 1rem;
    font-size: .78rem;
  }
  .footer-bar-links a{
    margin: 0 .4rem;
  }
}
/* ==== UPDATE-PAKET 16 ==== */

/* ---- Mobile Suche eleganter ---- */
@media (max-width: 860px){
  .mobile-search-item{
    padding: .8rem .4rem .5rem;
    margin-top: .6rem;
    border-top: 1px solid var(--grau-line);
  }
  .mobile-search{
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1.5px solid var(--grau-line);
    border-radius: 12px;
    padding: .55rem .7rem .55rem 1rem;
    height: 52px;
    box-shadow: 0 1px 3px rgba(90,57,33,.04);
    transition: border-color .15s, box-shadow .15s;
  }
  .mobile-search:focus-within{
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(240,138,42,.14);
  }
  .mobile-search::before{
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6A50' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
  }
  .mobile-search input{
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    padding: 0;
    min-width: 0;
  }
  .mobile-search input::placeholder{
    color: #A79A88;
  }
  .mobile-search button{
    background: var(--orange);
    border: 0;
    color: #fff;
    padding: 0 1rem;
    height: 38px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-search button:hover,
  .mobile-search button:active{
    background: var(--orange-dark);
  }
  .mobile-search button svg{
    display: block;
  }
}

/* ---- Lightbox: Hinweis-Text unter dem Bild ---- */
.lightbox-hint{
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  background: rgba(0,0,0,.4);
  padding: .35rem .9rem;
  border-radius: 999px;
  letter-spacing: .02em;
  pointer-events: none;
  animation: lightbox-hint-fade .3s ease-out;
}
.lightbox-hint svg{
  opacity: .7;
  animation: lightbox-hint-arrows 1.4s ease-in-out infinite;
}
.lightbox-hint svg:first-child{
  animation-delay: 0s;
}
.lightbox-hint svg:last-child{
  animation-delay: .7s;
}
@keyframes lightbox-hint-arrows{
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(-3px); opacity: 1; }
}
.lightbox-hint svg:last-child{
  animation-name: lightbox-hint-arrows-right;
}
@keyframes lightbox-hint-arrows-right{
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(3px); opacity: 1; }
}

/* Auf Handy: Pfeile weg, Hinweis zeigen */
@media (max-width: 900px){
  .lightbox-nav{ display: none !important; }
  .lightbox-hint{ display: inline-flex; }
  .lightbox-counter{
    bottom: 18px;
    font-size: .78rem;
    padding: .3rem .75rem;
  }
}
/* ==== UPDATE-PAKET 17 ==== */
/* Mobile Menue: kompakt, Untermenues einklappbar, kein Riesen-Leerraum */

@media (max-width: 860px){
  /* Standardmaessig alle Submenues zu */
  nav.main .sub{
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #FBF8F2 !important;
    border-radius: 0 !important;
    padding: .3rem 0 .3rem 1rem !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  nav.main li.sub-open > .sub{
    display: block !important;
  }

  /* Submenue-Eintraege kompakt */
  nav.main .sub a,
  nav.main .sub span.no-link{
    padding: .55rem .6rem !important;
    font-size: .92rem !important;
    border-radius: 6px !important;
    display: block !important;
    line-height: 1.35 !important;
  }

  /* Kein Riesen-Leerraum mehr: <li> darf nicht auf volle Hoehe gehen */
  nav.main > ul > li{
    border-bottom: 1px solid var(--grau-line);
    padding: 0;
  }
  nav.main > ul > li:last-child{ border-bottom: none; }

  /* Nav-Link kompakt */
  nav.main a.nav-link,
  nav.main span.nav-link.no-link{
    padding: .85rem .6rem !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    line-height: 1.3;
  }

  /* Pfeil-Indikator auf der rechten Seite des Elternpunkts */
  nav.main .sub-toggle-arrow{
    display: inline-block;
    margin-left: .4rem;
    font-size: .75rem;
    color: var(--orange);
    transition: transform .18s ease;
  }
  nav.main li.sub-open > .nav-link .sub-toggle-arrow{
    transform: rotate(180deg);
  }

  /* Suche unten im Menue: echtes Icon, kein schwarzes Kasterl */
  .mobile-search-item{
    display: block;
    padding: .8rem .2rem .2rem !important;
    margin-top: .4rem;
    border-top: 1px solid var(--grau-line);
  }
  .mobile-search{
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1.5px solid var(--grau-line);
    border-radius: 10px;
    padding: .3rem .35rem .3rem .85rem;
    height: 48px;
    box-shadow: 0 1px 3px rgba(90,57,33,.04);
    transition: border-color .15s, box-shadow .15s;
  }
  .mobile-search:focus-within{
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(240,138,42,.14);
  }
  .mobile-search input{
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: .98rem;
    color: var(--text);
    padding: 0;
    min-width: 0;
  }
  .mobile-search input::placeholder{ color: #A79A88; }
  .mobile-search button{
    background: var(--orange);
    border: 0;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s;
  }
  .mobile-search button:hover{ background: var(--orange-dark); }
  .mobile-search button svg{ display: block; }
}

/* Desktop: Pfeil-Indikator ausblenden */
nav.main .sub-toggle-arrow{
  display: none;
}
/* ==== UPDATE-PAKET 18 ==== */
/* Mobile: Untermenues immer sichtbar, kompakt, ohne Toggle */

@media (max-width: 860px){
  nav.main .sub{
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #FBF8F2 !important;
    border-radius: 0 !important;
    padding: .35rem 0 .35rem 1.1rem !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  nav.main .sub a,
  nav.main .sub span.no-link{
    padding: .55rem .65rem !important;
    font-size: .92rem !important;
    border-radius: 6px !important;
    display: block !important;
    line-height: 1.35 !important;
    color: var(--braun);
  }
  nav.main .sub a:hover{
    background: var(--orange-soft);
    color: var(--orange-dark);
  }

  nav.main > ul > li{
    border-bottom: 1px solid var(--grau-line);
    padding: 0;
  }
  nav.main > ul > li:last-child{ border-bottom: none; }

  nav.main a.nav-link,
  nav.main span.nav-link.no-link{
    padding: .85rem .6rem !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
    display: block !important;
    line-height: 1.3;
  }

  /* Pfeil-Indikatoren ausblenden */
  nav.main .sub-toggle-arrow{ display: none !important; }
}

/* Lightbox-Hinweis kompakter: nur "Bild 1 von 2" mit Pfeilen */
.lightbox-hint{
  font-size: .86rem;
  letter-spacing: .02em;
  padding: .4rem 1rem;
}
/* ==== UPDATE-PAKET 19 ==== */
/* Alten Lightbox-Counter ausblenden - nur "Bild X von Y" reicht */
.lightbox-counter,
.lightbox-counter::before{
  display: none !important;
  content: none !important;
}
/* ==== UPDATE-PAKET 22 ==== */
/* Footer: IMMER eine Zeile, egal wie schmal */

.footer-bar-inner{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .4rem 1rem !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.35 !important;
  font-size: .8rem;
  white-space: nowrap;
}

.footer-bar-inner > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.footer-bar-inner > span:first-child{
  flex: 1 1 auto;
}

.footer-bar-links{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: .7rem !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
.footer-bar-links a{
  margin: 0 !important;
  white-space: nowrap;
}

@media (max-width: 640px){
  .footer-bar-inner{
    padding: .38rem .75rem !important;
    font-size: .72rem !important;
    gap: .4rem !important;
  }
  .footer-bar-links{
    gap: .55rem !important;
  }
  .footer-bar-links a{
    font-size: .72rem !important;
  }
}

@media (max-width: 380px){
  .footer-bar-inner{
    font-size: .68rem !important;
    padding: .35rem .6rem !important;
  }
  .footer-bar-links{
    gap: .45rem !important;
  }
  .footer-bar-links a{
    font-size: .68rem !important;
  }
}
/* ==== UPDATE-PAKET 24 ==== */
/* Footer-Basis - wird per JS positioniert */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header.site{ flex-shrink: 0; }
main{ flex: 1 1 auto; }

.footer-bar{
  background: #FBFAF7;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: auto;
  flex-shrink: 0;
  /* position wird per JS gesetzt */
}
/* ==== UPDATE-PAKET 25 ==== */
/* Footer-Fix: sticky + dynamic viewport height
   -> loest das Firefox-Mobile-Problem mit Adressleiste */

html, body{
  height: auto;
}

body{
  min-height: 100vh;
  min-height: 100dvh;   /* dynamic viewport height - modernes Fallback */
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
}

header.site{ flex-shrink: 0; }
main{ flex: 1 0 auto; }

.footer-bar{
  /* Sticky am unteren Rand */
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  margin-top: auto;
  flex-shrink: 0;
  z-index: 40;
  background: #FBFAF7;
  /* KEIN fixed, KEIN JS */
}
/* ==== UPDATE-PAKET 26 ==== */
/* Footer endgueltig: reines position:fixed, kein vh/dvh/sticky mehr */

/* Alte Flex-Regeln am body neutralisieren */
body{
  display: block !important;
  min-height: 0 !important;
  padding-bottom: 44px !important;
}

.footer-bar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 40;
  background: #FBFAF7;
  flex-shrink: 0;
  /* Kein vh/dvh - bewusst weggelassen */
}

/* Falls irgendwo sticky/flex noch greift, ueberschreiben */
html, body{
  height: auto !important;
  min-height: 0 !important;
}
/* ==== UPDATE-PAKET 28 ==== */
/* Footer: fixed mit JS-rAF-Workaround fuer Firefox Mobile */

body{
  padding-bottom: 44px !important;
  display: block !important;
  min-height: 0 !important;
}
html{
  height: auto !important;
  min-height: 0 !important;
}

.footer-bar{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  margin: 0 !important;
  z-index: 40;
  background: #FBFAF7;
}
/* ==== UPDATE-PAKET 29 ==== */
/* Chrome und Firefox Mobile gleich skalieren
   (verhindert Font-Boosting in Chrome) */

html{
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* ==== UPDATE-PAKET 30 ==== */
.widget-text .wi-spacer{
  height: .6rem;
}
/* ==== UPDATE-PAKET 31 ==== */
/* Doppeltes Kalendersymbol in Firefox beheben
   -> native Picker ausblenden, unser Custom-Icon bleibt */

input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  position: absolute;
  right: 0;
  width: 2.4rem;
  height: 100%;
  cursor: pointer;
}

input[type="date"]::-moz-calendar-picker-indicator{
  /* Firefox: nativer Picker ausblenden */
  display: none !important;
}

input[type="date"]{
  /* Custom-Icon als Hintergrund bleibt */
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px !important;
}
/* ==== UPDATE-PAKET 32 ==== */
/* Nur natives Kalender-Symbol, eigene Grafik weg */

input[type="date"]{
  background-image: none !important;
  padding-right: .85rem !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* Sicherstellen, dass Chrome das native Symbol zeigt */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
/* ---- Upload-Fortschrittsbalken (Beitrag speichern) ---- */
.upload-progress {
  margin: 1rem 0;
  padding: .9rem 1rem;
  background: #FDF1E3;
  border: 1px solid #F3DFC0;
  border-radius: 12px;
}
.upload-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .55rem;
  color: #5A3921;
  font-weight: 600;
  font-size: .92rem;
}
.upload-progress-percent {
  color: #F08A2A;
  font-variant-numeric: tabular-nums;
}
.upload-progress-bar {
  height: 8px;
  background: #F3E4CC;
  border-radius: 999px;
  overflow: hidden;
}
.upload-progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #F08A2A, #8CBF3F);
  border-radius: 999px;
  transition: width .2s linear;
}
/* ---- Widget-Button (z. B. Krankmeldung) ---- */
.widget-button,
.widget-button:link,
.widget-button:visited,
.widget-button:hover,
.widget-button:focus,
.widget-button:active {
  color: #fff !important;
  text-decoration: none !important;
}
.widget-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1rem;
  margin: .2rem 0 .9rem;
  background: #F08A2A;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(240,138,42,.28);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.widget-button:hover,
.widget-button:focus {
  background: #D9721A;
  box-shadow: 0 4px 14px rgba(240,138,42,.4);
  transform: translateY(-1px);
}
.widget-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(240,138,42,.3);
}
.widget-button .wb-icon {
  flex-shrink: 0;
  color: #fff !important;
}
.widget-button span {
  line-height: 1.2;
  color: #fff !important;
}
.widget-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1rem;
  margin: .2rem 0 .9rem;
  background: #F08A2A;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(240,138,42,.28);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.widget-button:hover,
.widget-button:focus {
  background: #D9721A;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(240,138,42,.4);
  transform: translateY(-1px);
}
.widget-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(240,138,42,.3);
}
.widget-button .wb-icon {
  flex-shrink: 0;
}
.widget-button span {
  line-height: 1.2;
}