/* wirkaufenunsnix.de – zentrales Stylesheet (Mint-Variante) */
:root{
  --mint:#7fc8ad; --mint-dunkel:#5aa88d; --mint-hell:#dff2ea;
  --mint-tief:#356a54;                    /* dunkles Grün: Nix-Generator + Logo-Fläche */
  --apricot:#f2c9a8; --sand:#f6e7d7; --creme:#fbf8f3;
  --dunkel:#3e564c; --grau:#7d8f87; --weiss:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--creme);color:var(--dunkel);line-height:1.6}

/* ---------- Header ---------- */
header{background:linear-gradient(90deg,var(--mint),var(--mint-dunkel));color:#fff;padding:.9rem 5%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(90,168,141,.25)}
/* Logo auf dunkler Fläche, damit es sich vom Header-Verlauf abhebt */
.logo{font-size:1.35rem;font-weight:800;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--mint-tief);padding:.3rem .9rem .3rem .5rem;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.logo img{height:1.5em;width:1.5em;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.logo em{color:#eafff6;font-style:normal;text-decoration:line-through;text-decoration-color:var(--apricot);text-decoration-thickness:3px}
nav a{color:#fff;text-decoration:none;margin-left:1.2rem;font-size:.95rem;font-weight:600;opacity:.95}
nav a:hover{opacity:1;text-decoration:underline}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:4rem 5% 3.5rem;background:
  radial-gradient(circle at 15% 25%, rgba(127,200,173,.22), transparent 40%),
  radial-gradient(circle at 85% 70%, rgba(242,201,168,.28), transparent 45%),
  linear-gradient(180deg,var(--mint-hell),var(--creme));position:relative;overflow:hidden}
.hero h1{font-size:clamp(1.9rem,4.5vw,3.3rem);max-width:820px;margin:0 auto 1rem;line-height:1.2}
.hero h1 span.nix{color:var(--mint-dunkel)}
.hero p{font-size:1.15rem;color:var(--grau);max-width:640px;margin:0 auto 1.6rem}
.hero small{display:block;margin-top:.8rem;color:var(--grau);font-style:italic}
.hero.klein{padding:2.6rem 5% 2.2rem}
.hero.klein h1{font-size:clamp(1.6rem,3.5vw,2.4rem)}
.schwebe{position:absolute;font-size:2rem;opacity:.4;animation:schweben 8s ease-in-out infinite;user-select:none;pointer-events:none}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}

/* ---------- Sie/Ihn-Umschalter ---------- */
.gwahl{display:inline-flex;background:var(--weiss);border-radius:50px;padding:.35rem;box-shadow:0 3px 14px rgba(62,86,76,.12);margin-bottom:1.6rem}
.gwahl button{border:none;background:transparent;padding:.7rem 1.6rem;border-radius:50px;font-size:1.05rem;font-weight:700;cursor:pointer;color:var(--grau);transition:all .25s;font-family:inherit}
.gwahl button.aktiv{background:linear-gradient(90deg,var(--mint),var(--mint-dunkel));color:#fff;box-shadow:0 3px 10px rgba(90,168,141,.35)}
.notfall{display:inline-block;background:linear-gradient(90deg,var(--apricot),#e8ae82);color:var(--dunkel);padding:1rem 2.4rem;border-radius:50px;font-size:1.15rem;font-weight:800;text-decoration:none;box-shadow:0 5px 16px rgba(232,174,130,.4);transition:transform .15s}
.notfall:hover{transform:scale(1.05)}

/* ---------- Countdown ---------- */
.countdown{background:var(--apricot);padding:1.1rem 5%;text-align:center;font-weight:700;font-size:1.05rem;color:var(--dunkel)}
.countdown span.cd{background:var(--dunkel);color:var(--mint-hell);padding:.25rem .7rem;border-radius:8px;font-variant-numeric:tabular-nums;margin:0 .3rem}

/* ---------- Nix-Übersetzer ---------- */
.uebersetzer{background:linear-gradient(135deg,var(--mint),var(--mint-dunkel));color:#fff;padding:3.2rem 5%;text-align:center}
.uebersetzer h2{margin-bottom:.4rem;font-size:1.7rem}
.uebersetzer p.sub{opacity:.95;margin-bottom:1.5rem}
.ubox{max-width:560px;margin:0 auto;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border-radius:16px;padding:1.5rem}
select{width:100%;padding:.85rem;border-radius:10px;border:none;font-size:1rem;margin-bottom:1rem;font-family:inherit;color:var(--dunkel)}
.ergebnis{background:var(--creme);color:var(--dunkel);border-radius:10px;padding:1rem 1.2rem;font-size:1.05rem;display:none;text-align:left;animation:aufklappen .35s ease}
.ergebnis strong{color:var(--mint-dunkel)}
@keyframes aufklappen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Sektionen & Karten ---------- */
section.block{padding:3.5rem 5%;max-width:1100px;margin:0 auto}
section.block h2{font-size:1.8rem;margin-bottom:.3rem}
section.block>p, section.block .intro{color:var(--grau);margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem;align-items:stretch}
.karte{background:var(--weiss);border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(62,86,76,.08);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;opacity:0;transform:translateY(24px)}
.karte.sichtbar{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,box-shadow .2s}
.karte:hover{transform:translateY(-6px);box-shadow:0 9px 22px rgba(90,168,141,.2)}
.karte .bild{height:130px;min-height:130px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,var(--mint-hell),var(--sand))}
.karte .inhalt{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.karte h3{font-size:1.1rem;margin-bottom:.35rem}
.karte p{font-size:.92rem;color:var(--grau);margin-bottom:.8rem}
.karte .fuss{margin-top:auto}
.preis{font-weight:800;color:var(--mint-dunkel)}
.aff{display:inline-block;margin-top:.5rem;font-size:.9rem;background:linear-gradient(90deg,var(--mint),var(--mint-dunkel));color:#fff;padding:.55rem 1.1rem;border-radius:8px;text-decoration:none;font-weight:700;transition:transform .15s}
.aff:hover{transform:scale(1.05)}
.hinweis{font-size:.72rem;color:#b3c4bc;margin-top:.4rem}

/* ---------- Budget-Slider ---------- */
.budget{background:var(--mint-hell)}
.sliderbox{background:var(--weiss);border-radius:16px;padding:1.6rem;margin-bottom:2rem;box-shadow:0 3px 12px rgba(62,86,76,.08)}
.sliderbox label{font-weight:700;display:block;margin-bottom:.6rem}
.sliderbox output{color:var(--mint-dunkel);font-weight:800;font-size:1.2rem}
input[type=range]{width:100%;accent-color:var(--mint-dunkel);height:34px;cursor:pointer}
.slidertipp{margin-top:.6rem;font-size:.98rem;background:var(--creme);border-radius:10px;padding:.8rem 1rem}
.budget .karte .bild{background:linear-gradient(135deg,var(--mint),var(--mint-dunkel));color:#fff;font-size:1.7rem;font-weight:800}
.budget .karte{outline:3px solid transparent;transition:outline-color .3s,transform .2s,box-shadow .2s,opacity .5s ease}
.budget .karte.aktiv{outline-color:var(--apricot)}

/* ---------- Produktlisten (Unterseiten) ---------- */
.produkt{background:var(--weiss);border-radius:16px;box-shadow:0 3px 12px rgba(62,86,76,.08);display:flex;gap:1.2rem;padding:1.3rem;margin-bottom:1.1rem;align-items:flex-start;transition:transform .2s,box-shadow .2s;opacity:0;transform:translateY(24px)}
.produkt.sichtbar{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.produkt:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(90,168,141,.18)}
.produkt .picon{font-size:2.4rem;min-width:3.4rem;height:3.4rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mint-hell),var(--sand));border-radius:12px}
.produkt .ptext{flex:1}
.produkt h3{font-size:1.12rem;margin-bottom:.25rem}
.produkt p{font-size:.94rem;color:var(--grau);margin-bottom:.5rem}
.produkt .pmeta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.badge{display:inline-block;background:var(--mint-hell);color:var(--mint-dunkel);font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:6px;margin-left:.5rem;vertical-align:middle}
.brotkrumen{max-width:1100px;margin:1.2rem auto 0;padding:0 5%;font-size:.88rem;color:var(--grau)}
.brotkrumen a{color:var(--mint-dunkel)}

/* ---------- Blog ---------- */
.blog li{list-style:none;background:var(--weiss);border-left:5px solid var(--mint);padding:1rem 1.3rem;margin-bottom:.8rem;border-radius:0 12px 12px 0;transition:transform .15s}
.blog li:hover{transform:translateX(6px)}
.blog li a{color:var(--dunkel);text-decoration:none;font-weight:700}
.blog li a:hover{color:var(--mint-dunkel)}
.blog li span{display:block;font-size:.88rem;color:var(--grau)}

/* ---------- Newsletter ---------- */
.newsletter{background:linear-gradient(135deg,var(--apricot),var(--sand));color:var(--dunkel);text-align:center;padding:3.2rem 5%}
.newsletter h2{margin-bottom:.4rem}
.newsletter p{margin-bottom:1.4rem}
.newsletter form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.newsletter input{padding:.85rem 1rem;border-radius:10px;border:none;min-width:260px;font-size:1rem}
.newsletter button{padding:.85rem 1.7rem;border-radius:10px;border:none;background:var(--mint-dunkel);color:#fff;font-weight:800;cursor:pointer;font-size:1rem;transition:transform .15s}
.newsletter button:hover{transform:scale(1.05)}

/* ---------- Nix-Generator (Slot-Machine) ---------- */
/* Dunklerer Hintergrund als Übersetzer & Header, damit sich der Generator abhebt */
.generator{background:linear-gradient(135deg,var(--mint-dunkel),var(--mint-tief));color:#fff;padding:3.2rem 5%;text-align:center}
.generator h2{font-size:1.8rem;margin-bottom:.4rem}
.generator p.sub{opacity:.95;margin-bottom:1.5rem;max-width:560px;margin-left:auto;margin-right:auto}
.slot{max-width:560px;margin:0 auto 1.3rem;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border-radius:16px;padding:1.5rem;min-height:110px;display:flex;align-items:center;justify-content:center}
.slot .idee{font-size:1.15rem;font-weight:700;line-height:1.45}
.slot .idee small{display:block;font-weight:400;opacity:.85;font-size:.9rem;margin-top:.4rem}
/* Wackel-Animation, solange die Slot-Machine "rattert" */
.slot.rattert .idee{animation:rattern .09s linear infinite}
@keyframes rattern{0%{transform:translateY(-3px)}50%{transform:translateY(3px)}100%{transform:translateY(-3px)}}
.gen-btn{background:linear-gradient(90deg,var(--apricot),#e8ae82);color:var(--dunkel);border:none;padding:.95rem 2.3rem;border-radius:50px;font-size:1.1rem;font-weight:800;cursor:pointer;box-shadow:0 5px 16px rgba(232,174,130,.4);transition:transform .15s;font-family:inherit}
.gen-btn:hover{transform:scale(1.05)}
.slot-link{display:inline-block;margin-top:.6rem;color:#fff;font-weight:700}
/* Transparenz-Fussnote unter dem Generator.
   Abgedunkelte Pille, weil weisser Text direkt auf dem helleren Ende des Mint-Verlaufs
   nur 2,5:1 Kontrast haette. Mit 30 % Schwarz: 5,3:1 (hell) bzw. 9,9:1 (dunkel) -> WCAG AA erfuellt. */
.gen-fussnote{max-width:560px;margin:1.2rem auto 0;padding:.6rem .9rem;background:rgba(0,0,0,.30);border-radius:12px;font-size:.82rem;line-height:1.55;color:#fff}
.gen-fussnote a{color:#fff;text-decoration:underline}

/* ---------- Für-wen-Chips (Schnellwahl unter dem Sie/Ihn-Umschalter) ---------- */
.zielchips{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.zielchips button{border:2px solid var(--mint);background:var(--weiss);color:var(--mint-dunkel);padding:.35rem 1rem;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit}
.zielchips button:hover{background:var(--mint);color:#fff;transform:translateY(-2px)}

/* ---------- Anti-Wunschzettel: Teaser (Startseite) ---------- */
.antiteaser{background:linear-gradient(135deg,var(--sand),var(--apricot));text-align:center;padding:3rem 5%;color:var(--dunkel)}
.antiteaser h2{font-size:1.7rem;margin-bottom:.4rem}
.antiteaser p{max-width:620px;margin:0 auto 1.4rem;color:#6b5d4d}

/* ---------- Anti-Wunschzettel: Seite ---------- */
.anti-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.7rem;margin-bottom:1.4rem}
.anti-liste label{display:flex;align-items:flex-start;gap:.6rem;background:var(--weiss);border:2px solid transparent;border-radius:12px;padding:.8rem 1rem;cursor:pointer;box-shadow:0 2px 8px rgba(62,86,76,.07);transition:border-color .2s;font-size:.95rem}
.anti-liste label:has(input:checked){border-color:var(--mint-dunkel);background:var(--mint-hell)}
.anti-liste input{accent-color:var(--mint-dunkel);margin-top:.25rem;min-width:1.1rem;height:1.1rem}
.anti-frei{width:100%;padding:.85rem;border-radius:10px;border:2px solid var(--mint-hell);font-size:1rem;font-family:inherit;margin-bottom:1rem;color:var(--dunkel)}
.anti-frei:focus{outline:none;border-color:var(--mint)}
.anti-vorschau{background:var(--weiss);border-radius:14px;padding:1.3rem;box-shadow:0 3px 12px rgba(62,86,76,.08);margin-bottom:1.2rem;white-space:pre-wrap;font-size:.95rem;line-height:1.55}
.anti-buttons{display:flex;gap:.8rem;flex-wrap:wrap}
.btn-wa{display:inline-flex;align-items:center;gap:.5rem;background:#25d366;color:#fff;border:none;padding:.9rem 1.8rem;border-radius:50px;font-size:1.05rem;font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(37,211,102,.35);transition:transform .15s;font-family:inherit}
.btn-wa:hover{transform:scale(1.05)}
.btn-kopie{display:inline-flex;align-items:center;gap:.5rem;background:var(--weiss);color:var(--dunkel);border:2px solid var(--mint);padding:.9rem 1.8rem;border-radius:50px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .15s;font-family:inherit}
.btn-kopie:hover{transform:scale(1.05)}

/* ---------- Pro/Contra-Empfehlungsformat ---------- */
/* Ersetzt Sternchen-Bewertungen: ehrlich sagen, für wen es passt – und für wen nicht */
.procon{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0 .7rem}
@media(max-width:560px){.procon{grid-template-columns:1fr}}
.procon div{font-size:.85rem;border-radius:8px;padding:.55rem .8rem;color:var(--dunkel)}
.procon .pro{background:var(--mint-hell)}
.procon .contra{background:var(--sand)}
.procon strong{display:block;margin-bottom:.15rem}
.alternative{font-size:.85rem;background:var(--creme);border-radius:8px;padding:.5rem .8rem;color:var(--grau);margin-bottom:.6rem}
.alternative a{color:var(--mint-dunkel);font-weight:700}

/* ---------- Partner-Banner (Eigenwerbung ferienregion.info) ----------
   Gestaltung im Look von ferienregion.info für Wiedererkennung:
   dunkelgrüner Verlauf, Serifen-Headline, Berg-Silhouetten mit Sonne (Inline-SVG) */
.partnerbanner{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#2e6f50 0%,#245a41 55%,#1c4732 100%);color:#fff;padding:2.4rem 1.8rem 5rem;margin-top:1.8rem;text-align:center;box-shadow:0 6px 20px rgba(28,71,50,.35)}
.pb-deko{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none;display:block}
.pb-inhalt{position:relative;z-index:1;max-width:640px;margin:0 auto}
.pb-marke{font-weight:800;letter-spacing:.04em;margin-bottom:.7rem;font-size:1rem;opacity:.95}
.partnerbanner h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;margin-bottom:.5rem;line-height:1.25}
.partnerbanner p{font-size:.98rem;opacity:.92;margin-bottom:1.3rem}
.partnerbanner .aff{font-size:1rem;padding:.75rem 1.6rem}
.partnerbanner .hinweis{margin-top:.9rem;color:#a9c9b6}

/* ---------- Rechtsseiten ---------- */
.rechtstext{max-width:800px;margin:0 auto;padding:3rem 5%}
.rechtstext h1{font-size:1.9rem;margin-bottom:1.2rem}
.rechtstext h2{font-size:1.25rem;margin:1.6rem 0 .5rem}
.rechtstext p, .rechtstext li{margin-bottom:.7rem;color:#5a6e64}
.rechtstext .platzhalter{background:#fff3d6;border:1px dashed #d9a94e;border-radius:8px;padding:.15rem .5rem;font-weight:700;color:#8a6a1f}

footer{background:var(--dunkel);color:#c2d4cb;padding:2rem 5%;font-size:.85rem;text-align:center}
footer a{color:#c2d4cb;margin:0 .7rem}
footer .disclose{max-width:720px;margin:0 auto .8rem;font-size:.78rem}