/* Gemeinsames Design der Kundenseiten (index, mein-bereich, auftrag-status, kostenvoranschlag-status).
   Hell/Dunkel über data-theme auf <html> – gesetzt von design.js. */
/* ==== Design 2026: modernere Optik, Hell/Dunkel (data-theme auf <html>, Umschalter oben rechts) ====
   Überschreibt nur Aussehen – alle IDs, Formulare und Abläufe bleiben unverändert. */
  :root, :root[data-theme="dunkel"]{
    --bg:#0f0e0d; --panel:#191816; --panel-2:#221f1c; --line:#2e2a26;
    --text:#f3eee7; --muted:#a79f95; --accent:#d9a44f; --accent-2:#f0c47a; --good:#7fc28a;
    --schatten:0 18px 44px rgba(0,0,0,.45); --kopf-bg:rgba(15,14,13,.82); --btn-text:#1b1510;
    color-scheme:dark;
  }
  :root[data-theme="hell"]{
    --bg:#f7f3ed; --panel:#ffffff; --panel-2:#f3ede4; --line:#e6ddd0;
    --text:#1f1a15; --muted:#6c6258; --accent:#c07a22; --accent-2:#e2a64d; --good:#3f9a55;
    --schatten:0 18px 40px rgba(80,60,30,.13); --kopf-bg:rgba(247,243,237,.86); --btn-text:#ffffff;
    color-scheme:light;
  }
  body{font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif; padding:0 16px 60px; line-height:1.5;}
  input, select, textarea, button{font-family:inherit;}
  .card{border-radius:20px;}

  /* Kopfzeile: klebt oben, leicht durchsichtig */
  .site-nav{position:sticky; top:0; z-index:30; background:var(--kopf-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    margin:0 -16px 8px; padding:12px 24px; border-bottom:1px solid var(--line);}
  .site-nav .brand img{border-width:1px;}
  .site-nav .brand-name{text-transform:none; letter-spacing:.2px; font-size:16px;}
  .site-nav .brand-sub{font-size:11px;}
  .site-nav .links a{text-transform:none; font-size:14px; letter-spacing:0; color:var(--muted);}
  .site-nav .links a:hover{color:var(--text);}
  .site-nav .cta, .hero .btn-primary, button.submit, .btn-confirm{
    background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:var(--btn-text); border-radius:999px;
    text-transform:none; letter-spacing:.2px; font-size:14px; box-shadow:0 8px 22px rgba(217,164,79,.25);}
  :root[data-theme="hell"] .site-nav .cta, :root[data-theme="hell"] .hero .btn-primary, :root[data-theme="hell"] button.submit{background:#1f1a15; color:#fff; box-shadow:0 8px 22px rgba(31,26,21,.18);}
  .theme-schalter{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; font-size:16px;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
  .theme-schalter:hover{border-color:var(--accent);}

  /* Hero: Text links, Foto-Collage rechts */
  .hero{grid-template-columns:1.05fr 1fr; gap:48px; padding:64px 8px 48px;}
  .hero .eyebrow{display:none;}
  .hero-pille{display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background:color-mix(in srgb, var(--accent) 10%, transparent); padding:6px 12px; border-radius:999px; margin-bottom:16px;}
  .hero h2{font-size:56px; line-height:1.04; letter-spacing:-1.5px; font-weight:750; margin:0 0 18px;}
  .hero h2 .accent-line{background:linear-gradient(135deg,var(--accent-2),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero .underline{display:none;}
  .hero p.lead{font-size:18px; max-width:520px;}
  .hero .btn-primary, .hero .btn-secondary{padding:13px 22px; font-size:15px; border-radius:999px; text-transform:none; letter-spacing:0;}
  .hero .btn-secondary{background:var(--panel);}
  .hero-vertrauen{display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; font-size:13px; color:var(--muted);}
  .hero-vertrauen b{display:block; color:var(--text); font-size:15px;}
  #bewertungsUebersicht{margin-top:0 !important;}
  .hero-collage{position:relative; height:440px;}
  .hero-collage img{position:absolute; object-fit:cover; border-radius:22px; border:1px solid var(--line); box-shadow:var(--schatten); background:var(--panel);}
  :root[data-theme="hell"] .hero-collage img{border:6px solid #fff;}
  .hero-collage .c1{width:58%; height:62%; left:0; top:6%; transform:rotate(-3deg);}
  .hero-collage .c2{width:50%; height:52%; right:0; top:0; transform:rotate(4deg);}
  .hero-collage .c3{width:54%; height:48%; right:10%; bottom:0; transform:rotate(-1.5deg);}
  .hero-collage.leer{display:none;}
  .hero-collage:not(.leer) + .hero-badge{display:none;}

  /* Abschnitts-Überschriften */
  .section-heading{margin:40px 8px 20px;}
  .section-heading span{font-size:13px; letter-spacing:1.5px; font-weight:600;}

  /* Leistungen + Ablauf als Karten */
  .leistungen{gap:16px; padding:0 8px 8px;}
  .leistungen .item{text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px;}
  .leistungen .icon{margin:0 0 14px; width:46px; height:46px; padding:10px; border-radius:12px; background:color-mix(in srgb, var(--accent) 13%, transparent);}
  .leistungen h3{text-transform:none; letter-spacing:0; font-size:17px;}
  .leistungen p{font-size:14px;}
  .ablauf-steps{gap:16px;}
  .ablauf-step{flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px;}
  .ablauf-num{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:var(--btn-text);}
  :root[data-theme="hell"] .ablauf-num{background:var(--accent);}
  .ablauf-step h4{text-transform:none; letter-spacing:0; font-size:16px;}
  .ablauf-step p{font-size:14px;}
  .ablauf-arrow{display:none;}

  /* Produkte + Galerie breiter, Formulare bleiben schmal */
  #produkteUndFormular.wrap{max-width:1080px;}
  #produkteUndFormular > .card, #produkteUndFormular > #bearbeitungszeitBanner, #produkteUndFormular > #kontaktBanner{max-width:720px; margin-left:auto; margin-right:auto;}
  #bearbeitungszeitBanner{border-radius:999px;}
  #kontaktBanner{border-radius:14px;}
  .produkt-carousel .produkt-card{border-radius:22px !important; overflow:hidden; flex:0 0 300px;}
  .produkt-card .thumb{aspect-ratio:4/3;}
  .hero-vertrauen{gap:14px 26px; align-items:flex-start;}
  #navAppInstallBtn{border-radius:999px !important;}
  .beispiele-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:12px;}
  .beispiele-grid .foto{aspect-ratio:auto; height:100%; border-radius:16px; border:1px solid var(--line);}
  #beispieleGrid .foto:nth-child(6n+1){grid-row:span 2;}
  #beispieleGrid .foto:nth-child(6n+3){grid-column:span 2;}
  @media(max-width:760px){
    .beispiele-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
    #beispieleGrid .foto:nth-child(6n+3){grid-column:span 2;}
  }

  /* Kundenstimmen (nur Bewertungen, die Kunden zum Zeigen freigegeben haben) */
  .stimmen{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 24px;}
  .stimme{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:22px;}
  .stimme .sterne{color:var(--accent); letter-spacing:2px;}
  .stimme p{margin:10px 0 0; font-size:15px; white-space:pre-wrap;}
  @media(max-width:760px){.stimmen{grid-template-columns:1fr;}}

  /* „Sonstige Anfrage“ als Abschluss-Kasten */
  #formCard{background:radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), var(--panel);
    border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); padding:32px;}
  #formCardTitle{font-size:26px !important; text-transform:none !important; letter-spacing:-.4px !important; color:var(--text) !important;}
  #formCard p.intro{font-size:15px;}

  /* Fußbereich */
  footer.fuss{margin:48px -16px 0; padding:40px 24px; border-top:1px solid var(--line); text-align:left; font-size:14px;}
  .fuss-spalten{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px;}
  .fuss-spalten b{display:block; color:var(--text); margin-bottom:10px; font-size:14px;}
  .fuss-spalten a{display:block; margin-bottom:6px; text-decoration:none; color:var(--muted);}
  .fuss-spalten a:hover{color:var(--accent);}
  @media(max-width:760px){.fuss-spalten{grid-template-columns:1fr 1fr;}}

  #kundeLoggedOutArea a, #kundeLoggedInArea a{font-size:14px !important; color:var(--muted); text-decoration:none;}
  #kundeLoggedOutArea a:hover, #kundeLoggedInArea a:hover{color:var(--text);}
  #navKundenRegisterBtn{border:1px solid var(--line); border-radius:999px; padding:7px 14px;}
  @media(max-width:820px){
    .site-nav{gap:10px;}
    .site-nav .brand-sub{display:none;}
    #navKundenRegisterBtn, #navKundenPasswortBtn, #kundeLoggedInArea > span{display:none !important;}
    #navAppInstallBtn{font-size:0 !important; padding:6px 9px !important;}
    #navAppInstallBtn::before{content:"📲"; font-size:16px;}
    .produkt-carousel .produkt-card{flex:0 0 78%;}
    .site-nav .cta{padding:9px 14px; font-size:13px;}
    .hero{grid-template-columns:1fr; padding:28px 8px 24px; gap:24px;}
    .hero h2{font-size:38px; letter-spacing:-1px;}
    .hero p.lead{font-size:16px;}
    .hero-collage{height:280px; order:-1;}
    .leistungen{grid-template-columns:1fr;}
    .site-nav{padding:10px 16px;}
    .site-nav .links{order:10; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:18px; padding-bottom:2px; scrollbar-width:none;}
    .site-nav .links::-webkit-scrollbar{display:none;}
  }

/* ---- Statusseiten (auftrag-status.html, kostenvoranschlag-status.html) + Kundenportal ---- */
  h1{font-family:inherit;}
  body > .wrap > header{border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:24px;}
  body > .wrap > header img{border-radius:50%;}
  body > .wrap > header .theme-schalter{margin-left:auto;}
  .card{border-radius:20px;}
  .step .label{text-transform:none; letter-spacing:0; font-size:12px;}
  .step.done .dot{color:var(--btn-text);}
  .live{border-radius:16px;}
  .live-balken{border-radius:6px;}
  .kv-actions button{border-radius:999px; text-transform:none; letter-spacing:0; font-size:14px;}
  .abholung-wahl{border-radius:14px;}
  .kv-summary .preis{font-size:28px;}
  body > .wrap > footer{font-size:12px;}
  /* Buttons „Absenden“ im Portal */
  .modal-actions .btn-confirm{border-radius:999px;}

/* ---- 🎁 Geschenkgutschein kaufen (index.html) ---- */
  .gutschein-karte .gk-thumb{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:radial-gradient(circle at 30% 20%, #3a2f1f, #1c1a17 70%); border-bottom:1px solid #b8863c;}
  .gutschein-karte .gk-emoji{font-size:56px; line-height:1;}
  .gutschein-karte .gk-karte-wert{color:#e0b86c; font-weight:800; font-size:22px; letter-spacing:.5px;}
  .gutschein-karte .gk-kaufen{margin-top:8px; background:var(--accent); color:var(--btn-text); border:none; border-radius:999px; padding:8px 16px; font-weight:700; cursor:pointer;}
  .gk-betraege{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;}
  @media (max-width:420px){ .gk-betraege{grid-template-columns:repeat(3, 1fr);} }
  .gk-betrag{padding:10px 0; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); font-weight:700; cursor:pointer;}
  .gk-betrag.aktiv{border-color:var(--accent); background:var(--accent); color:var(--btn-text);}
  .gk-bank{display:grid; gap:6px; padding:12px 14px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); margin:8px 0; font-size:13px;}
  .gk-bank div{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;}
  .gk-bank span{color:var(--muted);}

/* ---- 💳 LJ-Guthaben (Kundenportal, KV-Seite) ---- */
  .mb-guthaben-stand{display:flex; flex-direction:column; gap:4px; padding:18px; border-radius:16px; background:linear-gradient(135deg, var(--panel-2), var(--panel)); border:1px solid var(--accent);}
  .mb-guthaben-stand b{font-size:30px; color:var(--accent);}
  .mb-guthaben-stand small, .mb-guthaben-zeile small{color:var(--muted); font-size:12px;}
  .mb-guthaben-zeile{display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;}
  .mb-guthaben-zeile b.plus{color:var(--good);}
  .kv-guthaben{margin:14px 0 0; padding:12px 14px; border-radius:14px; border:1px solid var(--accent); background:var(--panel-2); font-size:13.5px;}
  .kv-guthaben label{display:flex; align-items:center; gap:8px; cursor:pointer; font-weight:600;}
  .kv-guthaben .kvg-betrag{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; color:var(--muted); font-size:12.5px;}
  .kv-guthaben input[type=number]{width:110px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:6px 8px;}

/* ---- 🎨 Personalisierung im Produktfenster (index.html) ---- */
  .konfig-label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted);}
  .konfig-eingabe{background:var(--panel-2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 12px; font-size:14px;}
  .konfig-eingabe:focus{outline:none; border-color:var(--accent);}
  .konfig-vorschau{margin-top:10px; padding:16px; border-radius:14px; text-align:center;
    background:linear-gradient(135deg, var(--panel-2), var(--panel)); border:1px dashed var(--accent);}
  .konfig-vorschau-text{display:block; font-size:28px; font-weight:800; letter-spacing:1px; color:var(--accent);
    text-shadow:0 2px 0 rgba(0,0,0,.25); word-break:break-word; line-height:1.2;}
  .konfig-vorschau-hinweis{display:block; margin-top:6px; font-size:11px; color:var(--muted);}
  .produkt-tipp{position:absolute; top:10px; left:10px; background:var(--accent); color:var(--btn-text); font-size:11px; font-weight:700;
    padding:3px 10px; border-radius:999px; z-index:1;}