/* =============================================
   STROMANBIETER.ONLINE – Amber/Teal Design
   ============================================= */

:root {
    /* Basis: tiefes Anthrazit */
    --charcoal:     #18181b;
    --charcoal-mid: #27272a;

    /* Strom: Warmes Amber/Gold */
    --strom:        #d97706;
    --strom-light:  #fef3c7;
    --strom-mid:    #fbbf24;
    --strom-dark:   #b45309;

    /* Gas: Kühles Teal */
    --gas:          #0d9488;
    --gas-light:    #ccfbf1;
    --gas-mid:      #2dd4bf;

    /* Grautöne */
    --bg:           #fafaf9;
    --bg-card:      #ffffff;
    --border:       #e7e5e4;
    --text:         #1c1917;
    --muted:        #78716c;
    --white:        #ffffff;

    /* Aliases */
    --primary:      #d97706;
    --accent:       #0d9488;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    margin: 0;
}
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
a { color: var(--strom); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; color: var(--charcoal); }

/* City Grid */
.city-grid { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; padding:0; }
.city-grid li a { display:block; color:var(--text); padding:9px 13px; background:var(--bg); border-radius:7px; border-left:3px solid var(--strom); font-size:14px; transition:all 0.18s; text-decoration:none; }
.city-grid li a:hover { background:var(--strom); color:white; text-decoration:none; }
.city-grid li a span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }
.city-grid li a:hover span { color:#fde68a; }

/* A-Z Nav */
.az-nav { display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 34px; justify-content:center; background:var(--bg-card); padding:16px; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.05); }
.az-btn { background:#f5f5f4; border:1px solid #e7e5e4; padding:6px 12px; border-radius:5px; cursor:pointer; font-size:14px; font-weight:700; color:var(--strom); transition:all 0.18s; text-decoration:none; line-height:1; }
.az-btn:hover { background:var(--strom-light); text-decoration:none; }
.az-btn.active { background:var(--strom); color:white; border-color:var(--strom); }
.letter-group { margin-bottom:30px; background:var(--bg-card); padding:22px; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.letter-heading { color:var(--strom-dark); border-bottom:2px solid #f5f5f4; padding-bottom:9px; margin-bottom:16px; font-size:20px; }

/* Cards */
.card { background:var(--bg-card); border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.05); padding:26px; }
.content-section { background:var(--bg-card); border-radius:10px; box-shadow:0 1px 8px rgba(0,0,0,0.04); padding:28px; margin-bottom:24px; }
.result-header { text-align:center; margin-bottom:26px; background:var(--bg-card); padding:28px; border-radius:10px; box-shadow:0 1px 8px rgba(0,0,0,0.04); }

/* Legal */
.legal-content { background:var(--bg-card); padding:32px; border-radius:10px; box-shadow:0 1px 8px rgba(0,0,0,0.04); }
.legal-content h2 { color:var(--strom-dark); margin:26px 0 12px; font-size:1.2rem; }
.legal-content h2:first-child { margin-top:0; }
.legal-content h3 { color:var(--charcoal-mid); margin:20px 0 9px; font-size:1rem; }
.legal-content p { margin-bottom:13px; color:#44403c; }

/* Iframe */
.iframe-container { background:var(--bg-card); min-height:800px; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.05); }

/* Quick cards */
.quick-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:28px; }
.quick-card { background:var(--bg-card); padding:20px; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04); text-decoration:none; color:inherit; transition:transform 0.18s,box-shadow 0.18s; display:block; border-top:3px solid var(--strom); }
.quick-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(217,119,6,0.14); text-decoration:none; }
.quick-card h2 { margin:0 0 7px; color:var(--strom-dark); font-size:1rem; }
.quick-card p { margin:0; font-size:13px; color:var(--muted); }

/* Form */
.input-field { width:100%; padding:12px 14px; border:1.5px solid #d6d3d1; border-radius:7px; font-size:16px; outline:none; transition:border-color 0.2s,box-shadow 0.2s; background:white; }
.input-field:focus { border-color:var(--strom); box-shadow:0 0 0 3px rgba(217,119,6,0.14); }
.form-disclaimer { font-size:11px; color:#a8a29e; margin-top:10px; line-height:1.45; }
.form-poweredby { font-size:11px; color:#a8a29e; text-align:right; margin-bottom:7px; }

/* Breadcrumb */
.breadcrumb { font-size:13px; color:var(--muted); margin-bottom:18px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; white-space:nowrap; }
.breadcrumb a { color:var(--strom); }
.breadcrumb span { color:var(--muted); }

/* Details/FAQ */
details { background:var(--bg-card); border:1px solid var(--border); padding:13px 17px; border-radius:8px; margin-bottom:9px; cursor:pointer; }
details summary { font-weight:600; font-size:15px; outline:none; list-style:none; color:var(--charcoal); }
details summary::-webkit-details-marker { display:none; }
details summary::after { content:'+'; color:var(--strom); float:right; font-size:20px; line-height:1; font-weight:300; }
details[open] summary::after { content:'−'; }
details p { margin-top:11px; margin-bottom:0; color:var(--muted); font-size:14px; }

/* Accordion */
.accordion { background:var(--bg-card); color:var(--text); cursor:pointer; padding:15px 17px; width:100%; border:1px solid var(--border); border-radius:7px; text-align:left; outline:none; font-size:14px; font-weight:600; transition:0.2s; margin-bottom:9px; position:relative; }
.accordion:hover { background:#fafaf9; }
.accordion:after { content:'\002B'; font-size:18px; color:var(--muted); position:absolute; right:16px; top:50%; transform:translateY(-50%); }
.accordion.active:after { content:'\2212'; color:var(--strom); }
.accordion.active { border-color:var(--strom); border-bottom-left-radius:0; border-bottom-right-radius:0; margin-bottom:0; }
.panel { padding:0 17px; background:var(--bg-card); max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; border:1px solid var(--strom); border-top:none; border-bottom-left-radius:7px; border-bottom-right-radius:7px; margin-bottom:9px; opacity:0; }
.panel.show { opacity:1; padding:15px 17px; }
.panel p { margin:0; font-size:14px; color:#57534e; }

/* Dynamic cities */
.dynamic-cities { background:var(--bg-card); padding:26px; border-radius:10px; border:1px solid var(--border); }
.city-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:7px; }
.city-list a { color:var(--strom); text-decoration:none; font-size:13px; }
.city-list a:hover { text-decoration:underline; }

/* Nearby tags */
.nearby-tags { display:flex; flex-wrap:wrap; gap:7px; }
.nearby-tags a { background:var(--bg-card); padding:5px 11px; border-radius:6px; font-size:13px; border:1px solid #d6d3d1; color:#44403c; text-decoration:none; transition:all 0.18s; }
.nearby-tags a:hover { background:var(--strom); color:white; border-color:var(--strom); }

/* Info Box */
.info-box { background:#fffbeb; border-left:4px solid var(--strom); padding:16px 20px; border-radius:0 8px 8px 0; margin:18px 0; }
.info-box p { margin:0; font-size:14px; color:#92400e; }

/* Grid helper */
.grid-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; margin-top:20px; }

/* Responsive */
@media(max-width:768px) {
    .city-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
    .quick-links { grid-template-columns:1fr; }
}