:root{
  --brand-orange:#f29102;
  --brand-orange-dark:#cf7d02;
  --ink:#212529;
  --ink-soft:#495057;
  --border:#dee2e6;
  --bg-soft:#f9fafc;
  --danger:#dc3545;
  --success:#28a745;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;color:var(--ink);background:#fff;line-height:1.6;}
a{color:var(--brand-orange-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
.container{max-width:1140px;margin:0 auto;padding:0 20px;}

/* Header - echte diashop.digital-Struktur: Logo + Menü + Admin-Login, KEIN Kontakt-Balken */
header.site-header{border-bottom:1px solid var(--border);}
.main-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:24px;}
.main-nav .logo img{height:46px;}
.main-nav nav{flex:1;}
.main-nav nav > ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.main-nav nav > ul > li{position:relative;}
.main-nav nav a{color:var(--ink);font-weight:600;padding:8px 0;display:inline-block;}
.main-nav nav > ul > li:hover > a{color:var(--brand-orange-dark);}
.main-nav nav > ul > li > ul{
  list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:0;
  background:#fff;border:1px solid var(--border);border-radius:4px;min-width:180px;
  box-shadow:0 8px 20px rgba(0,0,0,.1);display:none;z-index:20;
}
.main-nav nav > ul > li:hover > ul,
.main-nav nav > ul > li > ul:focus-within{display:block;}
.main-nav nav > ul > li > ul li a{display:block;padding:8px 18px;font-weight:500;}
.main-nav nav > ul > li > ul li a:hover{background:var(--bg-soft);text-decoration:none;}
.main-nav .actions{display:flex;gap:12px;align-items:center;white-space:nowrap;}
.btn{display:inline-block;padding:9px 20px;border-radius:4px;font-weight:600;border:2px solid var(--brand-orange);cursor:pointer;font-size:.95rem;}
.btn-primary{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange);}
.btn-primary:hover{background:var(--brand-orange-dark);border-color:var(--brand-orange-dark);text-decoration:none;color:#fff;}
.btn-outline{background:transparent;color:var(--brand-orange);}
.btn-outline:hover{background:var(--brand-orange);color:#fff;text-decoration:none;}

/* Welcome / Hero */
.hero{background:linear-gradient(135deg,#fff4e5,#ffffff);padding:56px 0;text-align:center;border-bottom:1px solid var(--border);}
.hero h1{font-size:1.9rem;max-width:820px;margin:0 auto 16px;}
.hero p{max-width:680px;margin:0 auto;color:var(--ink-soft);font-size:1.1rem;}

/* Interaktiver Hero (Startseite) - Nachbau des H5P-Bildes mit klickbaren Hotspots */
.hero-interactive{padding:36px 0 0;}
.hero-interactive .stage{position:relative;max-width:100%;margin:0 auto;border-radius:8px;overflow:hidden;}
.hero-interactive .stage img{width:100%;display:block;}
.hotspot{
  position:absolute;width:34px;height:34px;border-radius:50%;
  background:var(--brand-orange);color:#fff;border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;
  cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.35);line-height:1;
}
.hotspot:hover{background:var(--brand-orange-dark);}
.hotspot-popup{
  position:absolute;transform:translate(-50%,10px);top:100%;left:50%;
  background:#fff;border:1px solid var(--border);border-radius:8px;min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:14px 18px;z-index:30;display:none;text-align:left;
}
.hotspot-popup.open{display:block;}
.hotspot-popup h4{margin:0 0 8px;font-size:1rem;color:var(--brand-orange-dark);}
.hotspot-popup p{margin:0 0 6px;}
.hotspot-popup a{font-weight:600;}
.hotspot-popup .close-popup{position:absolute;top:6px;right:10px;cursor:pointer;color:var(--ink-soft);font-weight:700;}

/* Page hero banner (Programm/Hersteller-Seiten) - wie im Original: innerhalb des Containers, proportional (img-fluid) */
.page-banner{padding-top:28px;}
.page-banner img{width:100%;height:auto;border-radius:6px;}

/* Sections */
section.block{padding:48px 0;border-bottom:1px solid var(--border);}
section.block h2{font-size:1.5rem;margin-bottom:8px;}
section.block .lead{color:var(--ink-soft);margin-bottom:28px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
.card{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .15s;}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#f0f0f0;}
.card .card-body{padding:16px;text-align:center;}
.card .card-body h3{margin:0 0 12px;font-size:1.05rem;}

.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.partner-card{border:1px solid var(--border);border-radius:8px;overflow:hidden;text-align:center;background:#fff;}
.partner-card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.partner-card .partner-name{padding:12px;font-weight:700;}
.partner-card .partner-link{display:block;padding:10px;background:var(--bg-soft);border-top:1px solid var(--border);font-weight:600;}

.info-box{background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:24px 28px;}
.info-box p{margin:0 0 10px;}

.zoom-cta{display:flex;align-items:center;gap:14px;background:var(--bg-soft);border:1px solid var(--border);border-radius:8px;padding:16px 20px;margin:20px 0;}
.zoom-cta img{width:44px;height:44px;object-fit:contain;flex-shrink:0;}
.zoom-cta a{font-weight:700;font-size:1.05rem;}

.event-item{border-bottom:1px solid var(--border);padding:18px 0;}
.event-item:last-child{border-bottom:none;}
.event-item .date{color:var(--brand-orange-dark);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;}
.event-item h4{margin:4px 0 6px;font-size:1.1rem;}
.event-item .meta{color:var(--ink-soft);font-size:.9rem;}

.download-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.download-list li{border:1px solid var(--border);border-radius:6px;padding:14px 16px;display:flex;align-items:center;gap:12px;background:#fff;}
.download-list img{width:24px;height:24px;flex-shrink:0;}

.contact-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px;}
.contact-box .item{border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center;}
.contact-box .item strong{display:block;margin-bottom:6px;color:var(--brand-orange-dark);}

/* Footer */
footer.site-footer{background:var(--ink);color:#c9ccd1;padding:32px 0;text-align:center;font-size:.9rem;}
footer.site-footer a{color:#f0b25e;}
footer.site-footer .legal-links a{margin:0 6px;}

/* Auth pages */
.auth-wrap{max-width:420px;margin:64px auto;padding:32px;border:1px solid var(--border);border-radius:8px;}
.auth-wrap h1{font-size:1.4rem;margin-top:0;text-align:center;}
.auth-wrap .field{margin-bottom:16px;}
.auth-wrap label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;}
.auth-wrap input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:4px;font-size:1rem;}
.auth-wrap .btn{width:100%;text-align:center;}
.auth-wrap .switch{text-align:center;margin-top:16px;font-size:.9rem;}
.msg{padding:10px 14px;border-radius:4px;margin-bottom:16px;font-size:.9rem;}
.msg.error{background:#fdeaea;color:var(--danger);border:1px solid #f5c2c7;}
.msg.success{background:#e9f7ec;color:var(--success);border:1px solid #b6e2c1;}

@media (max-width:900px){
  .main-nav{flex-wrap:wrap;}
  .main-nav nav > ul{flex-wrap:wrap;gap:14px;}
  .main-nav nav > ul > li > ul{position:static;box-shadow:none;border:none;display:block;padding-left:12px;}
  .hotspot-popup{position:fixed;left:50%;top:auto;bottom:16px;transform:translateX(-50%);width:calc(100% - 32px);max-width:340px;}
}