/* ══════════════════════════════════════════════════════════════
kreativkurse.ch – Stylesheet
Design inspiriert von swiss.com
══════════════════════════════════════════════════════════════ */
/* ── 1. Variablen (Swiss Design Tokens) ─────────────────── */
:root {
--red: #CC0000;
--red2: #A80000;
--red-bg: #FFF5F5;
--dark: #101010;
--ink: #1A1A1A;
--warm: #554E49;
--muted: #6F6660;
--mid: #CCCCCC;
--light: #F2F2F2;
--white: #FFFFFF;
--gr: #2E7D32;
--gr-bg: #F1F8F1;
--err: #CC0000;
--err-bg: #FFF5F5;
--font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--ls: 0.3px;
--r: 0px;
}
/* ── 2. Reset & Basis ────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--font);
background:var(--white);
color:var(--dark);
font-size:15px;
line-height:1.55;
letter-spacing:var(--ls);
min-height:100vh;
display:flex;
flex-direction:column;
-webkit-font-smoothing:antialiased;
}
main{flex:1}
h1,h2,h3{color:var(--dark);font-weight:700;letter-spacing:0.2px}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
/* ── 3. Buttons ──────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:6px;
padding:11px 22px;border:none;border-radius:var(--r);
font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:0.4px;
cursor:pointer;transition:background .15s,color .15s,border-color .15s;
white-space:nowrap;text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-or {background:var(--red);color:#fff}
.btn-or:hover{background:var(--red2);color:#fff}
.btn-oo {background:var(--white);color:var(--red);border:2px solid var(--red)}
.btn-oo:hover{background:var(--red-bg)}
.btn-nv {background:var(--dark);color:#fff}
.btn-nv:hover{background:var(--ink);color:#fff}
.btn-gh {background:transparent;color:var(--muted);border:1px solid var(--mid)}
.btn-gh:hover{border-color:var(--dark);color:var(--dark)}
.btn-gr {background:var(--gr);color:#fff;border:none}
.btn-gr:hover{background:#1b5e20;color:#fff}
.btn-sm {padding:7px 16px;font-size:13px}
.btn-lg {padding:14px 30px;font-size:15px}
.btn-bl {width:100%;justify-content:center}
/* ── 4. Formulare ────────────────────────────────────────── */
.inp{
width:100%;padding:10px 14px;
border:1px solid var(--mid);border-radius:var(--r);
font-family:var(--font);font-size:14px;letter-spacing:var(--ls);
color:var(--dark);background:var(--white);outline:none;transition:border .15s;
}
.inp:focus{border-color:var(--dark)}
select.inp{
cursor:pointer;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
}
textarea.inp{resize:vertical;min-height:80px}
.field-label{font-size:11px;font-weight:700;color:var(--muted);display:block;margin-bottom:6px;letter-spacing:0.6px;text-transform:uppercase}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px}
.form-grid-2 .span-2{grid-column:span 2}
.form-actions{padding:0 24px 24px;display:flex;gap:12px}
.agb-label{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin-bottom:18px;cursor:pointer;color:var(--muted)}
.enroll-form{margin-top:4px}
/* ── 5. Badges, Tags, Alerts ─────────────────────────────── */
.bge{display:inline-block;padding:3px 9px;border-radius:var(--r);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:0.5px;text-transform:uppercase}
.bge-or{background:var(--red-bg);color:var(--red)}
.bge-nv{background:var(--light);color:var(--dark)}
.bge-gr{background:var(--gr-bg);color:var(--gr)}
.bge-rd{background:var(--err-bg);color:var(--err)}
.bge-gy{background:var(--light);color:var(--muted)}
.tag{display:inline-block;padding:3px 9px;background:var(--light);border-radius:var(--r);font-size:12px;color:var(--muted);letter-spacing:0.3px}
.alert{padding:13px 18px;border-radius:var(--r);font-size:14px;margin-bottom:16px;font-weight:600;border-left:4px solid}
.alert-success{background:var(--gr-bg);border-color:var(--gr);color:var(--gr)}
.alert-error{background:var(--err-bg);border-color:var(--err);color:var(--err)}
.flash{padding:14px 24px;font-size:14px;font-weight:600;text-align:center;border-bottom:1px solid}
.flash-success{background:var(--gr-bg);color:var(--gr);border-color:#c8e6c9}
.flash-error{background:var(--err-bg);color:var(--err);border-color:#ffcdd2}
.divider{border:none;border-top:1px solid var(--mid)}
.stars{color:#C8A000}
/* ── 6. Layout-Helfer ────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.py-sm{padding-top:16px;padding-bottom:16px}
.py-md{padding-top:24px;padding-bottom:28px}
.py-lg{padding-top:40px;padding-bottom:48px}
.mb-sm{margin-bottom:8px}
.mb-md{margin-bottom:20px}
.mb-lg{margin-bottom:32px}
.text-right{text-align:right}
.text-muted{color:var(--muted)}
.text-orange{color:var(--red)}
.text-green{color:var(--gr)}
.text-navy{color:var(--dark)}
.fw-bold{font-weight:700}
.section-gap{margin-bottom:48px}
.section-title{font-size:22px;font-weight:700;margin-bottom:6px;color:var(--dark)}
.section-sub{font-size:14px;color:var(--muted);margin-bottom:20px}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.card{background:var(--white);border:1px solid var(--mid);overflow:hidden}
.card-block{background:var(--white);border:1px solid var(--mid);padding:32px 36px}
/* ── 7. Navigation ───────────────────────────────────────── */
/* Utility-Bar */
.nav-utility{background:var(--white);border-bottom:1px solid var(--mid)}
.nav-utility-inner{
max-width:1200px;margin:0 auto;padding:0 24px;
height:38px;display:flex;align-items:center;justify-content:flex-end;
gap:20px;font-size:12px;color:var(--muted);letter-spacing:0.3px;
}
.nav-utility-inner a{color:var(--muted);font-size:12px}
.nav-utility-inner a:hover{color:var(--dark);text-decoration:none}
.nav-util-sep{color:var(--mid)}
/* Haupt-Nav */
#nav{
background:var(--white);
border-bottom:1px solid var(--mid);
position:sticky;top:0;z-index:500;
box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;max-width:1200px;margin:0 auto;width:100%}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo:hover{text-decoration:none}
.nav-logo-icon{
width:38px;height:38px;background:var(--red);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:900;font-size:18px;flex-shrink:0;letter-spacing:-1px;
}
.nav-logo-name{color:var(--dark);font-weight:700;font-size:18px;letter-spacing:0.2px}
.nav-logo-tag{color:var(--muted);font-size:11px;letter-spacing:0.5px;margin-top:1px;text-transform:uppercase}
.nav-links{display:flex;gap:0}
.nav-btn{
padding:0 18px;height:64px;display:inline-flex;align-items:center;
font-size:14px;font-weight:600;letter-spacing:0.2px;
color:var(--dark);text-decoration:none;
border-bottom:3px solid transparent;
transition:border-color .15s,color .15s;
}
.nav-btn:hover{color:var(--red);border-bottom-color:var(--red);text-decoration:none}
.nav-btn.active{color:var(--red);border-bottom-color:var(--red)}
.role-dropdown{position:relative}
.role-btn{
background:var(--light);border:1px solid var(--mid);
padding:8px 16px;font-size:13px;font-weight:600;letter-spacing:0.3px;
color:var(--dark);display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s;
}
.role-btn:hover{background:#e5e5e5}
.role-arrow{font-size:8px;color:var(--muted)}
.role-menu{
position:absolute;top:calc(100% + 2px);right:0;
background:var(--white);border:1px solid var(--mid);
box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:210px;z-index:600;overflow:hidden;display:none;
}
.role-menu.open{display:block}
.role-menu-header{padding:9px 16px 7px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;border-bottom:1px solid var(--mid)}
.role-item{display:flex;justify-content:space-between;padding:12px 16px;font-size:14px;color:var(--dark);text-decoration:none;border-bottom:1px solid var(--light);transition:background .1s}
.role-item:last-child{border-bottom:none}
.role-item:hover{background:var(--light);text-decoration:none}
.role-item.active{color:var(--red);font-weight:700}
/* ── 8. Breadcrumb ───────────────────────────────────────── */
.breadcrumb{background:var(--white);border-bottom:1px solid var(--mid)}
.breadcrumb-inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;gap:6px;font-size:12px;color:var(--muted);align-items:center;flex-wrap:wrap;letter-spacing:0.3px}
.bc-sep{color:var(--mid)}
.bc-link{color:var(--muted);font-weight:400}
.bc-link:hover{color:var(--red);text-decoration:underline}
.bc-current{color:var(--dark);font-weight:600}
/* ── 9. Hero ─────────────────────────────────────────────── */
.hero{background:var(--dark);padding:56px 24px 52px}
.hero-inner{max-width:820px;margin:0 auto;text-align:center}
.hero-eyebrow{
display:inline-block;border:1px solid rgba(255,255,255,.3);
color:rgba(255,255,255,.8);padding:4px 14px;
font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:22px;
}
.hero h1{color:#fff;font-size:clamp(26px,3.5vw,44px);line-height:1.15;margin-bottom:16px;font-weight:700;letter-spacing:-0.5px}
.hero-sub{color:rgba(255,255,255,.65);font-size:16px;line-height:1.6;margin-bottom:32px}
.hero-search{
background:var(--white);display:flex;max-width:640px;margin:0 auto 32px;
border:1px solid var(--mid);box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.hero-search input{
flex:1;border:none;outline:none;
font-family:var(--font);font-size:15px;letter-spacing:var(--ls);
padding:14px 18px;color:var(--dark);
}
.hero-stats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:8px}
.hero-stat-num{color:var(--red);font-size:24px;font-weight:700}
.hero-stat-label{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;letter-spacing:0.4px}
.cat-bar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.cat-bar-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap}
.cat-bar-btn{
background:transparent;border:none;border-bottom:3px solid transparent;
color:rgba(255,255,255,.6);font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:0.3px;
padding:14px 16px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;
transition:color .15s,border-color .15s;
}
.cat-bar-btn:hover,.cat-bar-btn.active{color:#fff;border-bottom-color:var(--red);text-decoration:none}
.search-hero{background:var(--dark);padding:28px 24px}
.search-hero-inner{max-width:1200px;margin:0 auto}
.search-hero h1{color:#fff;font-size:22px;margin-bottom:16px;letter-spacing:0}
.search-bar{background:var(--white);display:flex;max-width:760px;border:1px solid var(--mid);box-shadow:0 2px 12px rgba(0,0,0,.25)}
.search-bar input{flex:1;border:none;outline:none;font-family:var(--font);font-size:15px;letter-spacing:var(--ls);padding:12px 18px;color:var(--dark)}
.search-cat-pills{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.search-cat-pill{
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
color:rgba(255,255,255,.8);padding:5px 14px;font-size:12px;font-weight:600;letter-spacing:0.3px;
cursor:pointer;transition:all .15s;text-decoration:none;
}
.search-cat-pill:hover,.search-cat-pill.active{background:var(--red);border-color:var(--red);color:#fff;text-decoration:none}
/* ── 10. Kategorien ──────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1px;background:var(--mid);border:1px solid var(--mid)}
.cat-item{background:var(--white);padding:24px 18px;text-align:center;transition:background .15s;text-decoration:none;display:block}
.cat-item:hover{background:var(--light);text-decoration:none}
.cat-item.active{background:var(--dark)}
.cat-item.active .cat-label{color:#fff}
.cat-item.active .cat-count{color:rgba(255,255,255,.55)}
.cat-icon{font-size:26px;margin-bottom:10px}
.cat-label{font-size:13px;font-weight:700;color:var(--dark);letter-spacing:0.2px}
.cat-count{font-size:11px;color:var(--muted);margin-top:4px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mid);border:1px solid var(--mid)}
.cta-navy{background:var(--dark);padding:36px 32px}
.cta-navy h3{color:#fff;font-size:18px;margin-bottom:10px}
.cta-navy p{color:rgba(255,255,255,.6);font-size:14px;line-height:1.65;margin-bottom:22px}
.cta-orange{background:var(--light);padding:36px 32px}
.cta-orange h3{font-size:18px;margin-bottom:10px}
.cta-orange p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:22px}
.cta-icon{font-size:28px;margin-bottom:12px}
/* ── 11. Kurs-Cards ──────────────────────────────────────── */
.course-card {
background: var(--white);
border: 1px solid var(--mid);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: box-shadow .2s, transform .15s;
text-decoration: none;
color: inherit;
}
.course-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.13); transform: translateY(-1px); text-decoration: none; }
.course-card-top { height: 4px; background: var(--red); flex-shrink: 0; }
/* Banner-Bild */
.course-card-banner { height: 150px; overflow: hidden; flex-shrink: 0; }
.course-card-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.course-card:hover .course-card-banner img { transform: scale(1.04); }
/* Card-Body */
.course-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.course-card-badges { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 6px; }
.course-card-title { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 8px; }
.course-card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; flex: 1; }
/* Meta — zwei Zeilen, kein Grid, kein verschachtelter */
.course-card-meta { margin-bottom: 12px; border-top: 1px solid var(--light); padding-top: 12px; }
.ccm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ccm-loc { font-size: 13px; color: var(--dark); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ccm-dur { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ccm-instr { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.ccm-price { font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; }
.ccm-free { color: var(--gr) !important; }
/* Tags */
.course-card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
/* Kurs-ansehen Button (kein — ist schon im ) */
.course-card-btn {
background: var(--red);
color: #fff;
text-align: center;
padding: 11px 16px;
font-weight: 700;
font-size: 13px;
letter-spacing: var(--ls);
text-transform: uppercase;
margin-top: auto;
}
.course-card:hover .course-card-btn { background: var(--dark); }
/* ── 12. Listen-Resultate ────────────────────────────────── */
.list-results{display:flex;flex-direction:column;gap:1px;background:var(--mid);border:1px solid var(--mid)}
.list-card{background:var(--white);padding:20px 24px;display:flex;gap:20px;align-items:center}
.list-card:hover{background:var(--light)}
.list-card-logo{font-size:42px;flex-shrink:0}
.list-card-body{flex:1}
.list-card-name{font-weight:700;font-size:16px;color:var(--dark);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.list-card-sub{font-size:13px;color:var(--muted);margin-top:3px}
.list-card-meta{display:flex;gap:16px;font-size:13px;flex-wrap:wrap;margin-top:6px;color:var(--muted)}
.list-card-desc{font-size:13px;color:var(--muted);margin-top:5px}
.avatar{border-radius:50%;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:700}
.av-xs{width:30px;height:30px;font-size:10px}
.av-sm{width:38px;height:38px;font-size:12px}
.av-md{width:50px;height:50px;font-size:14px}
.av-lg{width:52px;height:52px;font-size:15px}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.active-filters-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;background:var(--dark);color:#fff;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:0.3px}
.filter-chip-remove{cursor:pointer;opacity:.6;font-size:14px;text-decoration:none;color:#fff}
.filter-chip-remove:hover{opacity:1}
.empty-state{text-align:center;padding:60px 24px;color:var(--muted)}
.empty-icon{font-size:40px;margin-bottom:16px;color:var(--mid)}
.empty-state h3{color:var(--dark);margin-bottom:8px;font-size:18px}
.empty-state p{font-size:14px}
.tab-bar{display:flex;border-bottom:1px solid var(--mid);margin-bottom:24px}
.tab-btn{
background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;
padding:12px 20px;font-size:14px;font-weight:400;letter-spacing:0.2px;
color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;text-decoration:none;display:inline-block;
}
.tab-btn:hover{color:var(--dark);text-decoration:none}
.tab-btn.active{font-weight:700;color:var(--dark);border-bottom-color:var(--red)}
/* ── 13. Detail-Seite ────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 310px;gap:28px;align-items:start}
.detail-sidebar{display:flex;flex-direction:column;gap:16px}
.detail-card{padding:30px 36px}
.detail-badges{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.detail-title{font-size:26px;line-height:1.2;margin-bottom:14px;letter-spacing:-0.3px}
.detail-desc{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.detail-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mid);border:1px solid var(--mid)}
.detail-meta-item{background:var(--white);padding:14px 16px}
.detail-meta-label{font-size:11px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.detail-meta-value{font-weight:700;font-size:15px;color:var(--dark)}
.detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px}
.detail-sub-title{font-size:11px;color:var(--muted);margin-bottom:16px;text-transform:uppercase;letter-spacing:0.6px;font-weight:700}
.instr-row{display:flex;gap:16px;align-items:center}
.instr-name{font-weight:700;font-size:16px;color:var(--dark)}
.instr-spec{font-size:13px;color:var(--muted);margin-top:2px}
.instr-rating{display:flex;gap:6px;align-items:center;font-size:13px;margin-top:5px;color:var(--muted)}
.sidebar-card{background:var(--white);border:1px solid var(--mid);padding:24px}
.sidebar-price{font-size:28px;font-weight:700;margin-bottom:4px}
.sidebar-price-sub{font-size:13px;color:var(--muted);margin-bottom:18px}
.sidebar-details{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sidebar-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}
.inst-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.inst-logo-lg{font-size:30px}
.inst-row-name{font-weight:700;color:var(--dark);font-size:14px}
.inst-row-city{font-size:12px;color:var(--muted);margin-top:2px}
.inst-verified{font-size:12px;color:var(--gr);font-weight:700}
/* ── 14. Dashboard ───────────────────────────────────────── */
.dash-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.dash-header h1{font-size:24px;margin-bottom:4px;letter-spacing:-0.3px}
.dash-sub{color:var(--muted);font-size:14px}
.dash-inst-head{display:flex;gap:14px;align-items:center}
.dash-inst-logo{width:52px;height:52px;background:var(--dark);display:flex;align-items:center;justify-content:center;font-size:26px}
.stat-card{background:var(--white);border:1px solid var(--mid);padding:22px 24px}
.stat-icon{font-size:22px;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:700;color:var(--dark);margin-bottom:3px}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.panel{background:var(--white);border:1px solid var(--mid)}
.panel-header{background:var(--dark);padding:14px 22px;display:flex;align-items:center;justify-content:space-between}
.panel-header span{color:#fff;font-weight:700;font-size:14px;letter-spacing:0.3px}
.panel-row{padding:16px 22px;border-bottom:1px solid var(--light);display:flex;gap:14px;align-items:center}
.panel-row:hover{background:var(--light)}
.panel-row:last-child{border-bottom:none}
.panel-row-body{flex:1}
.panel-row-title{font-weight:700;color:var(--dark);font-size:14px}
.panel-row-sub{font-size:12px;color:var(--muted);margin-top:3px}
.panel-row-actions{display:flex;gap:8px;flex-shrink:0;margin-left:12px}
.panel-add-row{padding:14px 22px;text-align:center;font-size:13px;font-weight:700;color:var(--red);border-top:1px dashed var(--mid)}
.panel-add-row a{color:var(--red)}
.progress-wrap{margin-top:8px}
.progress-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.progress-track{height:3px;background:var(--light);overflow:hidden}
.progress-fill{height:100%;background:var(--red);transition:width .5s ease}
.new-course-form{background:var(--white)}
/* ── 15. Admin-Tabellen ──────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse}
.data-table thead tr{background:var(--light);border-bottom:2px solid var(--mid)}
.data-table th{padding:12px 18px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px}
.data-table tbody tr{border-bottom:1px solid var(--light)}
.data-table tbody tr:hover{background:var(--light)}
.data-table tbody tr:last-child{border-bottom:none}
.data-table td{padding:14px 18px;font-size:14px;vertical-align:middle}
.table-name{display:flex;gap:10px;align-items:center}
.pending-row{padding:14px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--light)}
.pending-row:last-child{border-bottom:none}
.pending-info{flex:1}
.pending-name{font-weight:700;color:var(--dark);font-size:14px}
.pending-meta{font-size:12px;color:var(--muted);margin-top:2px}
/* ── 16. Filter-Box & Suche ──────────────────────────────── */
.sidebar-layout{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
.filter-box{background:var(--white);border:1px solid var(--mid);position:sticky;top:78px}
.filter-box-header{background:var(--dark);padding:14px 18px}
.filter-box-header span{color:#fff;font-weight:700;font-size:14px;letter-spacing:0.3px}
.filter-box-body{padding:18px;display:flex;flex-direction:column;gap:18px}
.filter-section label{font-size:11px;font-weight:700;color:var(--muted);display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.6px}
.radio-group{display:flex;flex-direction:column;gap:6px}
.radio-item{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer;width:100%;color:var(--dark)}
.radio-item input{accent-color:var(--red);flex-shrink:0}
.radio-count{margin-left:auto;font-size:11px;color:var(--muted)}
/* ── 17. Institutionen ───────────────────────────────────── */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--mid);border:1px solid var(--mid)}
.inst-card{background:var(--white);padding:18px 20px;display:flex;gap:14px;align-items:center;cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.inst-card:hover{background:var(--light);text-decoration:none}
.inst-card-logo{font-size:32px;flex-shrink:0}
.inst-card-name{font-weight:700;color:var(--dark);font-size:14px}
.inst-card-meta{font-size:12px;color:var(--muted);margin-top:3px}
.inst-card-verified{font-size:11px;color:var(--gr);font-weight:700;margin-top:3px;letter-spacing:0.3px}
/* ── 18. Footer ──────────────────────────────────────────── */
footer{background:var(--dark);color:rgba(255,255,255,.45);padding:40px 24px;margin-top:60px;border-top:3px solid var(--red)}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.footer-logo-icon{width:28px;height:28px;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:14px;letter-spacing:-1px}
.footer-logo-name{color:#fff;font-weight:700;font-size:15px;letter-spacing:0.2px}
.footer-desc{font-size:13px;line-height:1.65;color:rgba(255,255,255,.4)}
.footer-right{font-size:12px;text-align:right;line-height:1.8}
/* ── 19. Animationen ─────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .25s ease both}
/* ══════════════════════════════════════════════════════════════
20. RESPONSIVE – Mobile-First
══════════════════════════════════════════════════════════════ */
/* ── Tablet (≤ 1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
.detail-grid { grid-template-columns: 1fr }
.detail-sidebar { order: -1 }
.detail-meta-grid { grid-template-columns: repeat(2,1fr) }
.form-grid-2 { grid-template-columns: 1fr }
.form-grid-2 .span-2 { grid-column: 1 }
}
/* ── Kleines Tablet (≤ 900px) ──────────────────────────── */
@media (max-width: 900px) {
.grid-4 { grid-template-columns: repeat(2,1fr) }
.grid-3 { grid-template-columns: repeat(2,1fr) }
.sidebar-layout { grid-template-columns: 1fr !important }
.sidebar { display: none }
.cta-grid { grid-template-columns: 1fr; gap: 0 }
.grid-auto { grid-template-columns: repeat(2,1fr) }
.nav-links a.hide-mobile { display: none }
}
/* ── Mobile (≤ 640px) ──────────────────────────────────── */
@media (max-width: 640px) {
/* Basis */
* { -webkit-tap-highlight-color: transparent }
.container { padding: 0 14px }
.py-lg { padding-top: 28px; padding-bottom: 28px }
.py-md { padding-top: 20px; padding-bottom: 20px }
/* Utility & Nav */
.nav-utility { display: none }
.nav-inner { height: 56px; padding: 0 14px; gap: 8px }
.nav-logo-name { font-size: 14px }
.nav-logo-tag { display: none }
.nav-logo-icon { width: 28px; height: 28px; font-size: 14px }
.nav-links { gap: 0 }
.nav-btn { padding: 0 10px; font-size: 12px }
.hide-mobile { display: none !important }
.role-btn span:not(.role-arrow) { display: none }
.role-btn { gap: 4px; padding: 6px 10px }
.flash { font-size: 13px; padding: 10px 14px }
/* Hero */
.hero { padding: 32px 14px 28px }
.hero h1 { font-size: 26px; line-height: 1.2 }
.hero p { font-size: 14px }
.search-bar { flex-direction: column; gap: 8px }
.search-bar input { width: 100%; font-size: 15px }
.search-bar button { width: 100%; padding: 14px }
/* Grids → 1 Spalte */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
.grid-auto { grid-template-columns: 1fr }
/* Kategorie-Kacheln */
.cat-grid { grid-template-columns: repeat(3,1fr) }
.cat-box { padding: 14px 8px }
.cat-icon { font-size: 22px }
.cat-label{ font-size: 11px }
.cat-count{ font-size: 10px }
/* Kurskarten — volle Breite, leicht kompakter */
.course-card-body { padding: 14px 16px }
.course-card-title { font-size: 15px }
.course-card-desc { font-size: 12px; margin-bottom: 10px; }
.ccm-row { margin-bottom: 5px }
.course-card-btn { padding: 13px 16px; font-size: 12px }
.course-card-banner { height: 130px }
/* Such-Hero */
.search-hero-inner h1 { font-size: 20px }
.search-cat-pills { gap: 5px }
.search-cat-pill { font-size: 11px; padding: 5px 10px }
.tab-bar { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch }
.tab-btn { font-size: 12px; padding: 10px 12px; white-space: nowrap }
/* Filter-Box auf Mobile ausblenden (Accordion wäre nächster Schritt) */
.filter-box { display: none }
/* Tags & Badges */
.tag { font-size: 11px; padding: 3px 8px }
.bge { font-size: 10px; padding: 2px 7px }
/* Stat-Cards */
.stat-card { padding: 16px 12px }
.stat-value { font-size: 22px }
/* Panel-Rows */
.panel-row { padding: 12px 14px; flex-wrap: wrap; gap: 8px }
/* Breadcrumb */
.breadcrumb-inner { font-size: 11px; padding: 6px 14px }
/* Admin-Tabelle scrollen */
.data-table-wrap { overflow-x: auto }
.data-table { min-width: 600px }
.admin-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch }
/* Institution / Kursleiter Hero */
.dash-header { flex-direction: column; gap: 12px; align-items: flex-start }
/* Detail-Seite */
.detail-meta-grid { grid-template-columns: 1fr }
.detail-hero h1 { font-size: 20px }
/* Forms */
.inp { font-size: 16px } /* verhindert iOS zoom */
select.inp { font-size: 16px }
/* Buttons */
.btn-bl { width: 100%; text-align: center }
/* Footer */
.footer-inner { flex-direction: column; gap: 28px; padding: 28px 14px }
.footer-links { flex-direction: column; gap: 20px }
.footer-right { text-align: left }
}
/* ── Sehr kleines Mobile (≤ 380px) ──────────────────────── */
@media (max-width: 380px) {
.nav-btn { padding: 0 6px; font-size: 11px }
.cat-grid { grid-template-columns: repeat(2,1fr) }
.hero h1 { font-size: 22px }
}
/* ── Footer Links ─────────────────────────────────────────── */
.footer-links { display:flex; gap:40px; flex-wrap:wrap; }
.footer-link-col { display:flex; flex-direction:column; gap:5px; }
.footer-link-col a { color:rgba(255,255,255,.45); font-size:13px; }
.footer-link-col a:hover { color:#fff; text-decoration:none; }
.footer-link-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:rgba(255,255,255,.3); margin-bottom:3px; }
/* ── Blog-Inhalt ─────────────────────────────────────────── */
.blog-body h2 { font-size:22px; font-weight:700; color:var(--dark); margin:28px 0 12px; }
.blog-body h3 { font-size:17px; font-weight:700; color:var(--dark); margin:22px 0 10px; }
.blog-body p { font-size:15px; line-height:1.75; color:var(--dark); margin-bottom:16px; }
.blog-body ul { padding-left:24px; margin:12px 0 16px; }
.blog-body li { font-size:15px; line-height:1.7; margin-bottom:5px; }
.blog-body strong { font-weight:700; }
.blog-body em { font-style:italic; }
.blog-body hr { border:none; border-top:1px solid var(--mid); margin:24px 0; }
.blog-body a { color:var(--red); }
/* ── Card Hover ──────────────────────────────────────────── */
.card-hover:hover { box-shadow:0 6px 24px rgba(0,0,0,.1); }
/* ── OG-Default Image ────────────────────────────────────── */
/* Wird via PHP generiert wenn nicht vorhanden */