/* Template "nixdorf" – Design der Startseite, für Joomla angepasst */

:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1d212a; --line:#2a2f3a;
  --text:#e8eaf0; --muted:#9aa3b2; --accent:#ffb020; --accent2:#4fd1c5;
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f3ee; --panel:#ffffff; --panel2:#faf8f3; --line:#e2ddd2;
         --text:#1c1d21; --muted:#5d6472; --accent:#c26a00; --accent2:#0f7f76; }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%; height:auto}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2; letter-spacing:-.01em}
.muted{color:var(--muted)}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}

/* ---------- Link-Leiste ganz oben (Position header-links) ---------- */
.topbar{background:var(--panel2); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; justify-content:flex-end; align-items:center; min-height:34px; padding-top:4px; padding-bottom:4px}
.topbar ul,
.topbar .mod-menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.topbar li{margin:0}
.topbar a{
  display:inline-block; padding:2px 11px; font-size:.78rem; line-height:1.6;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; background:var(--panel);
}
.topbar a:hover,
.topbar .active > a,
.topbar .current > a{color:var(--text); border-color:var(--accent2); text-decoration:none}

/* ---------- Kopfzeile ---------- */
.site-header{background:color-mix(in srgb,var(--bg) 88%,transparent); border-bottom:1px solid var(--line); z-index:20}
.site-header.is-sticky{position:sticky; top:0; backdrop-filter:blur(10px)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:62px; flex-wrap:wrap}
.logo{font-weight:700; letter-spacing:.02em; color:var(--text); font-size:1.15rem}
.logo span{color:var(--accent)}
.logo:hover{text-decoration:none}

.main-nav ul,
.main-nav .mod-menu{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px}
.main-nav a{color:var(--muted); font-size:.96rem; padding:6px 0; display:inline-block}
.main-nav a:hover,
.main-nav .active > a,
.main-nav .current > a{color:var(--text); text-decoration:none}
.main-nav .active > a,
.main-nav .current > a{box-shadow:0 2px 0 var(--accent)}
/* Untermenüs */
.main-nav li{position:relative}
.main-nav li ul{
  display:none; position:absolute; top:100%; left:0; min-width:190px; z-index:30;
  flex-direction:column; gap:0; padding:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px;
}
.main-nav li:hover > ul,
.main-nav li:focus-within > ul{display:flex}
.main-nav li ul a{padding:6px 10px; display:block}

/* ---------- Hero (Position hero) ---------- */
.hero{padding:56px 0 40px; position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:auto -10% -50% auto; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 65%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.5rem); line-height:1.08; margin:14px 0 12px; letter-spacing:-.02em}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{max-width:640px; color:var(--muted); font-size:1.1rem}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--panel)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 25%,transparent)}

/* ---------- Spaltenlayout: links | Inhalt | rechts ---------- */
.layout{display:grid; gap:24px; padding:32px 0 48px; grid-template-columns:minmax(0,1fr)}
.layout.has-left{grid-template-columns:230px minmax(0,1fr)}
.layout.has-right{grid-template-columns:minmax(0,1fr) 260px}
.layout.has-left.has-right{grid-template-columns:230px minmax(0,1fr) 260px}

@media (max-width:1020px){
  .layout.has-left.has-right{grid-template-columns:minmax(0,1fr) 240px}
  .layout.has-left.has-right .col-left{grid-column:1 / -1; order:3}
  .layout.has-left.has-right .col-main{order:1}
  .layout.has-left.has-right .col-right{order:2}
}
@media (max-width:760px){
  .layout,
  .layout.has-left,
  .layout.has-right,
  .layout.has-left.has-right{grid-template-columns:minmax(0,1fr)}
  .col-main{order:1}
  .col-right{order:2}
  .col-left{order:3}
  .layout.has-left.has-right .col-left{grid-column:auto}
}

/* ---------- Boxen (Modul-Rahmen "box") ---------- */
.box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; margin-bottom:16px}
.box-title{margin:0 0 10px; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.box-body > :first-child{margin-top:0}
.box-body > :last-child{margin-bottom:0}
.box ul{margin:0; padding-left:18px; color:var(--muted)}
.box ul.nav,
.box ul.mod-menu,
.box ul.mod-list{list-style:none; padding-left:0}
.box ul.mod-menu li a,
.box ul.nav li a{display:block; padding:5px 8px; margin:0 -8px; border-radius:8px; color:var(--text)}
.box ul.mod-menu li a:hover,
.box ul.nav li a:hover{background:var(--panel2); text-decoration:none}
.box ul.mod-menu li.active > a,
.box ul.mod-menu li.current > a{color:var(--accent)}
.box p{color:var(--muted)}

.main-top .box,
.main-bottom .box{margin-top:0}

/* ---------- Inhalt: Beiträge, Blog, Kategorien ---------- */
.col-main h1,
.col-main h2.item-title,
.page-header h1{font-size:1.8rem; margin:0 0 14px}
.col-main .page-header{margin-bottom:10px}
.blog-item,
.com-content-article,
.com-content-category-blog__item,
.blog-items > div,
.items-leading > div,
.items-row > div{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin-bottom:16px;
}
.item-title,
.page-header h2{margin:0 0 6px; font-size:1.25rem}
.item-title a,
.page-header h2 a{color:var(--text)}
.item-title a:hover{color:var(--accent); text-decoration:none}
.article-info{color:var(--muted); font-size:.85rem; margin:0 0 8px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px}
.article-info dd,
.article-info li{margin:0}
.com-content-article__body > :first-child{margin-top:0}
.readmore a,
a.btn,
.btn,
button.btn{
  display:inline-block; padding:8px 16px; border-radius:10px; font-weight:600; font-size:.92rem;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer;
}
.readmore a:hover,
.btn:hover{border-color:var(--accent2); text-decoration:none}
.btn.primary,
.btn-primary{background:var(--accent); color:var(--on-accent,#1a1200); border-color:transparent}
.btn.primary:hover,
.btn-primary:hover{filter:brightness(1.08)}

/* Breadcrumbs */
.mod-breadcrumbs,
ol.breadcrumb{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 14px; font-size:.85rem; color:var(--muted)}
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before{content:"›"; margin-right:6px}

/* Formulare */
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=url],
input[type=tel],
select,
textarea,
.form-control{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font:inherit;
}
input:focus,
select:focus,
textarea:focus{outline:2px solid color-mix(in srgb,var(--accent2) 60%,transparent); outline-offset:1px}
label{display:inline-block; margin-bottom:4px; font-size:.92rem; color:var(--muted)}

/* Tabellen */
table{border-collapse:collapse; width:100%}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left}
th{background:var(--panel2)}

/* Blättern */
.pagination ul,
ul.pagination{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:16px 0}
.pagination a,
.pagination span{display:inline-block; padding:5px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
.pagination .active span,
.pagination .active a{border-color:var(--accent); color:var(--accent)}

/* Meldungen */
joomla-alert,
.alert{display:block; padding:12px 16px; margin-bottom:16px; border:1px solid var(--line); border-left:4px solid var(--accent2); border-radius:10px; background:var(--panel)}
joomla-alert .alert-heading{display:none}
.alert-danger,
.alert-error{border-left-color:#e5484d}
.alert-warning{border-left-color:var(--accent)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); font-size:.92rem}
.footer-row{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}

/* ---------- Eingebettetes Funkbuch ---------- */
.funkbuch-frame{display:block; width:100%; min-height:640px; border:0; background:transparent}

/* ---------- Anmelden-Fenster neben dem Menue ---------- */
.header-row .main-nav{margin-left:auto}
.login-pop{position:relative}
.login-pop summary{list-style:none; cursor:pointer; color:var(--muted); font-size:.96rem; padding:6px 0; user-select:none}
.login-pop summary::-webkit-details-marker{display:none}
.login-pop summary:hover,.login-pop[open] summary{color:var(--text)}
.login-panel{position:absolute; right:0; top:100%; z-index:60; width:min(300px,88vw); margin-top:6px; padding:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 32px rgba(0,0,0,.35)}
.login-panel form > *{margin-bottom:10px}
.login-panel label{display:block; font-size:.85rem; color:var(--muted); margin-bottom:3px}
.login-panel input[type=text],.login-panel input[type=password]{width:100%}
.login-panel .input-group{display:flex; gap:6px}
.login-panel .input-group input{flex:1; min-width:0}
.login-panel ul{list-style:none; margin:8px 0 0; padding:0; font-size:.85rem}

/* article-info-aus: keine Autor-/Kategorie-Zeile */
.article-info{display:none}

/* login-zeilen: Anmelden-Fenster mit Beschriftung links, Eingabefeld rechts */
.login-panel::before{content:"Login"; display:block; font-weight:700; font-size:1.05rem; margin-bottom:12px}
.login-panel .input-group{display:flex; align-items:center; gap:8px}
.login-panel .input-group label.visually-hidden{position:static; width:96px; height:auto; margin:0; clip:auto; clip-path:none; overflow:visible; white-space:nowrap; order:-1; flex:0 0 96px; font-size:.9rem; color:var(--muted)}
.login-panel .input-group-text{display:none}
.login-panel .input-group input{flex:1 1 auto; min-width:0}
.login-panel .input-group .btn{flex:0 0 auto; padding:4px 8px}
.login-panel .plg_system_webauthn_login_button,
.login-panel .mod-login__submit:has(.plg_system_webauthn_login_button){display:none}
.login-panel{width:min(360px,92vw)}

/* login-zeilen2: Feinschliff Anmelden-Fenster */
.login-panel .input-password-toggle{display:none}
.login-panel .form-group{margin-bottom:10px}
.login-panel .form-check{display:flex; align-items:center; gap:8px; margin-left:104px}
.login-panel .form-check label{margin:0}
.login-panel .mod-login__submit .btn-primary{width:100%}
.login-panel .mod-login__options{margin-top:12px}