/* Dénia PC Doc — deniapcdoc.com
   Design-System in der Familie von f1-admin.com: dunkles Rot, Orbitron + DM Sans,
   keine externen Ressourcen. Lichtmodus über body.light (Umschalter, localStorage). */

@font-face { font-family:'Orbitron'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Orbitron-Regular.ttf') format('truetype'); }
@font-face { font-family:'Orbitron'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Orbitron-Bold.ttf') format('truetype'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/DMSans-Light.ttf') format('truetype'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/DMSans-Regular.ttf') format('truetype'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/DMSans-Medium.ttf') format('truetype'); }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family:'DM Sans',system-ui,sans-serif; font-weight:300; line-height:1.65;
  color:#f0e8e8; background-color:#1e1112;
  background-image:
    linear-gradient(rgba(180,40,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,40,40,.035) 1px, transparent 1px);
  background-size:30px 30px;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
body::after {
  content:''; position:fixed; top:-160px; right:-160px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle, rgba(200,50,50,.10) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}

/* ── Lichtmodus (Gold) ── */
body.light { color:#2e2510; background-color:#f5eed8;
  background-image:linear-gradient(rgba(184,144,48,.10) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(184,144,48,.10) 1px, transparent 1px); }
body.light::after { display:none; }

/* ── Kopf ── */
.site-header {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  max-width:900px; width:100%; margin:0 auto;
  padding:1.5rem 1.5rem .5rem;
}
.site-header .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.site-header .brand img { width:40px; height:40px; border-radius:10px; display:block; }
.site-header .brand-name { font-family:'Orbitron',sans-serif; font-size:1rem; letter-spacing:.04em; }
.site-header nav { margin-left:auto; display:flex; gap:1.15rem; align-items:center; flex-wrap:wrap; }
.site-header nav a, .lang-switch a {
  color:#b0939a; text-decoration:none; font-size:.9rem;
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
body.light .site-header nav a, body.light .lang-switch a { color:#5c4f35; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color:#f0e8e8; border-color:rgba(240,232,232,.5); }
body.light .site-header nav a:hover, body.light .site-header nav a[aria-current="page"] { color:#2e2510; border-color:rgba(46,37,16,.5); }
.lang-switch { font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; margin-left:.4rem; }

/* ── Kontakt im Kopf: Telefon + WhatsApp auf jeder Seite ── */
.header-contact { display:flex; align-items:center; gap:.5rem; margin-left:.75rem; }
.hc {
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:40px; padding:.35rem .7rem; border-radius:999px;
  font-size:.86rem; font-weight:500; text-decoration:none;
  color:#f0e8e8; background:rgba(255,255,255,.05); border:1px solid #4d3033;
  transition:border-color .2s, background .2s, color .2s;
}
.hc:hover { border-color:rgba(200,50,50,.55); background:rgba(200,50,50,.12); }
.hc.wa { color:#5fd48a; border-color:rgba(95,212,138,.35); }
.hc.wa:hover { background:rgba(37,211,102,.14); border-color:rgba(95,212,138,.7); }
body.light .hc { color:#2e2510; background:rgba(184,144,48,.08); border-color:#ddd0a8; }
body.light .hc.wa { color:#0f7a3d; border-color:rgba(15,122,61,.35); }
body.light .hc.wa:hover { background:rgba(15,122,61,.10); border-color:rgba(15,122,61,.6); }
.hc svg { flex-shrink:0; }

/* Sticky-Leiste mobil: Anrufen / WhatsApp */
.mobile-bar {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:98;
  gap:1px; background:#3a2427; border-top:1px solid #4d3033;
  padding-bottom:env(safe-area-inset-bottom);
}
body.light .mobile-bar { background:#e2d7b4; border-top-color:#ddd0a8; }
.mobile-bar a {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:56px; font-size:.95rem; font-weight:500; text-decoration:none;
  color:#f0e8e8; background:#22151a;
}
body.light .mobile-bar a { color:#2e2510; background:#f7f0dc; }
.mobile-bar a.wa { color:#5fd48a; }
body.light .mobile-bar a.wa { color:#0f7a3d; }

/* ── Inhalt ── */
main { position:relative; z-index:1; max-width:900px; width:100%; margin:0 auto; padding:1rem 1.5rem 3rem; flex:1; }

.hero { padding:2.5rem 0 1.5rem; }
.hero .eyebrow { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#b0939a; margin-bottom:.9rem; }
body.light .hero .eyebrow { color:#5c4f35; }
h1 { font-family:'Orbitron',sans-serif; font-weight:400; font-size:2rem; line-height:1.2; margin-bottom:1rem; }
.lead { font-size:1.05rem; max-width:62ch; color:#d9c9cb; }
body.light .lead { color:#4a3f28; }
h2 { font-family:'Orbitron',sans-serif; font-weight:400; font-size:1.15rem; margin:2.5rem 0 .9rem; }
h3 { font-size:1rem; font-weight:500; margin:1.6rem 0 .5rem; }
p, li { font-size:.98rem; }
p + p { margin-top:.8rem; }
main a:not(.btn):not(.guide-card) { color:#f0c9c9; text-decoration:underline; text-underline-offset:3px; }
body.light main a:not(.btn):not(.guide-card) { color:#8c2020; }
.guide-card, .guide-card:hover { text-decoration:none; }

/* ── Buttons / Links ── */
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; padding:.7rem 1.15rem; border-radius:10px;
  font-size:.95rem; font-weight:500; text-decoration:none;
  background:#8c2020; color:#fff; border:1px solid #a92e2e;
  transition:background .2s,border-color .2s;
}
.btn:hover { background:#6e1818; border-color:#c24545; }
.btn.secondary { background:rgba(255,255,255,.04); color:#f0e8e8; border-color:#4d3033; }
.btn.secondary:hover { background:rgba(200,50,50,.10); border-color:rgba(200,50,50,.45); }
body.light .btn { color:#fff; }
body.light .btn.secondary { background:rgba(184,144,48,.08); color:#2e2510; border-color:#ddd0a8; }
.btn .icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── Anleitungs-Karten ── */
.guide-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1.25rem; }
@media (min-width:640px) { .guide-grid { grid-template-columns:1fr 1fr; } }

.guide-card {
  display:flex; flex-direction:column; gap:.55rem;
  background:#2c1a1c; border:1px solid #4d3033; border-radius:14px;
  padding:1.25rem 1.25rem 1.1rem; text-decoration:none; color:inherit;
  transition:border-color .2s, background .2s, transform .1s;
}
body.light .guide-card { background:#fffdf5; border-color:#ddd0a8; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.guide-card:hover { border-color:rgba(200,50,50,.5); background:#331e20; }
body.light .guide-card:hover { background:#fffaf0; border-color:rgba(184,144,48,.55); }
.guide-card h3 { margin:0; font-family:'DM Sans',sans-serif; font-weight:500; font-size:1.02rem; }
.guide-card .meta { font-size:.86rem; color:#b0939a; }
body.light .guide-card .meta { color:#5c4f35; }
.guide-card .excerpt { font-size:.95rem; color:#d9c9cb; }
body.light .guide-card .excerpt { color:#4a3f28; }
.guide-card .tags { margin-top:auto; padding-top:.7rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.guide-card .cta {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem;
  font-size:.88rem; font-weight:500; color:#f0c9c9;
}
body.light .guide-card .cta { color:#8c2020; }
.guide-card:hover .cta { text-decoration:underline; text-underline-offset:3px; }
.tag { font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:#b0939a;
  border:1px solid #4d3033; border-radius:999px; padding:.15rem .6rem; }
body.light .tag { color:#5c4f35; border-color:#ddd0a8; }

/* ── Ausschneide-Karte (Kühlschrank/Telefon) ── */
.kitchen-card {
  border:2px dashed #8c2020; border-radius:14px; padding:1.4rem 1.5rem;
  margin:2rem 0 1rem; background:rgba(180,40,40,.06);
}
body.light .kitchen-card { border-color:#b89030; background:rgba(184,144,48,.08); }
.kitchen-card .kicker { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#b0939a; margin-bottom:.6rem; }
body.light .kitchen-card .kicker { color:#5c4f35; }
.kitchen-card h3.big { font-family:'Orbitron',sans-serif; font-weight:400; font-size:1.3rem; margin:0 0 .8rem; line-height:1.35; }
.kitchen-card ul.huge { list-style:none; margin:0 0 .8rem; padding:0; }
.kitchen-card ul.huge li { font-size:1.15rem; margin-bottom:.5rem; padding-left:1.4rem; position:relative; }
.kitchen-card ul.huge li::before { content:'—'; position:absolute; left:0; color:#8c2020; }
.kitchen-card .src { font-size:.78rem; color:#b0939a; margin:0; }
body.light .kitchen-card .src { color:#5c4f35; }

/* ── Anleitungsseite ── */
.steps { counter-reset:step; list-style:none; margin:1rem 0 1.25rem; }
.steps li { counter-increment:step; position:relative; padding-left:2.6rem; margin-bottom:.9rem; }
.steps li::before {
  content:counter(step); position:absolute; left:0; top:.1rem;
  width:1.85rem; height:1.85rem; border-radius:50%;
  background:rgba(180,40,40,.18); border:1px solid #4d3033; color:#f0e8e8;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:500;
}
body.light .steps li::before { background:rgba(184,144,48,.16); border-color:#ddd0a8; color:#2e2510; }
.callout {
  border-left:3px solid #8c2020; background:rgba(180,40,40,.09);
  border-radius:0 10px 10px 0; padding:.9rem 1.1rem; margin:1.25rem 0; font-size:.95rem;
}
body.light .callout { border-left-color:#b89030; background:rgba(184,144,48,.12); }
.download-box {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border:1px solid #4d3033; border-radius:12px; padding:1rem 1.15rem; margin:1.5rem 0;
  background:rgba(255,255,255,.03);
}
body.light .download-box { border-color:#ddd0a8; background:rgba(184,144,48,.06); }
.download-box .file { font-size:.86rem; color:#b0939a; }
body.light .download-box .file { color:#5c4f35; }
.breadcrumb { font-size:.85rem; line-height:1.5; color:#b0939a; margin-bottom:1.1rem; }
body.light .breadcrumb { color:#5c4f35; }
.breadcrumb a { color:inherit; }

/* ── Textseiten (Impressum/Datenschutz) ── */
.prose { max-width:70ch; }
.prose h2 { margin-top:2rem; }
.prose ul { margin:.6rem 0 .9rem 1.2rem; }
.prose li { margin-bottom:.35rem; }

/* ── Fuß ── */
footer {
  position:relative; z-index:1;
  max-width:900px; width:100%; margin:0 auto;
  padding:1.5rem; border-top:1px solid #3a2427;
  font-size:.82rem; color:#a88891;
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
}
body.light footer { border-top-color:#ddd0a8; color:#6b5c3c; }
footer a { color:inherit; }

/* ── Umschalter ── */
.theme-toggle {
  position:fixed; top:1rem; right:1rem; z-index:99;
  width:38px; height:38px; border-radius:50%; border:1px solid #4d3033;
  background:rgba(44,26,28,.85); color:#f0e8e8; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s;
}
body.light .theme-toggle { background:rgba(255,253,245,.85); border-color:#ddd0a8; color:#2e2510; }

/* Tastaturfokus sichtbar (WCAG 2.4.7) */
.hc:focus-visible, .btn:focus-visible, .site-header nav a:focus-visible,
.guide-card:focus-visible, .mobile-bar a:focus-visible, main a:focus-visible {
  outline:2px solid #f0c9c9; outline-offset:2px; border-radius:6px;
}
body.light .hc:focus-visible, body.light .btn:focus-visible,
body.light .site-header nav a:focus-visible, body.light main a:focus-visible {
  outline-color:#8c2020;
}

@media (max-width:600px) {
  h1 { font-size:1.55rem; }
  .site-header { padding:1rem 1rem .25rem; }
  .site-header nav { gap:1rem; font-size:.95rem; width:100%; justify-content:space-between; }
  .site-header nav a, .lang-switch a { min-height:44px; }
  main { padding:.75rem 1rem 2.5rem; }
  .hero { padding:1.5rem 0 1rem; }
  .theme-toggle { width:44px; height:44px; }
  p, li { font-size:1rem; }
  .header-contact { display:none; }
  .mobile-bar { display:flex; }
  body { padding-bottom:76px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }