/* Lokale Schriften */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/fraunces-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-sans-latin-700-normal.woff2) format("woff2")}
/* ============================================================
   taschenreinigung.de – eigenes Design (Petrol/Pink, rollende Kugel).
   Wird beim Update nicht ersetzt.
   ============================================================ */
:root{
  --papier:#FFF8F4; --tinte:#2B2331; --grau:#6F6472; --nebel:#EAD9D3;
  --moos:#1E6B74; --rinde:#154D54; --blatt:#EA5F8C; --rosa:#FDE3EA;
  --serif:"Fraunces",Georgia,serif; --sans:"Nunito Sans",system-ui,-apple-system,sans-serif;
}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.62}
h1,h2,.karte h2,.emp-titel,.box .pname{font-family:var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--tinte)}
h1{font-size:clamp(28px,4.4vw,40px);line-height:1.12}
h2{font-size:clamp(22px,2.8vw,28px)}
a{color:var(--moos);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--blatt)}
.spalte{max-width:720px}

/* --- Kopf: hell, Logo mit pinker Endung --- */
header.kopf{background:rgba(255,248,244,.94);border-bottom:1px solid var(--nebel);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px)}
header.kopf .spalte{max-width:1120px;height:64px}
header.kopf a.marke{color:var(--tinte);font-family:var(--serif);font-weight:700;font-size:22px}
header.kopf a.marke .tld{color:var(--blatt)}
header.kopf nav a{color:var(--grau);font-weight:600;font-size:15px}
header.kopf nav a:hover{color:var(--moos);background:var(--rosa)}
header.kopf nav a.aktiv{color:var(--moos);background:var(--rosa)}
header.kopf nav a.hervor{color:#fff;background:var(--blatt)}
header.kopf nav a.hervor:hover{color:#fff;background:#d94a79}
header.kopf a:focus-visible,.burger:focus-visible{outline:2px solid var(--blatt)}
.burger span{background:var(--tinte)}
@media(max-width:820px){
  header.kopf .spalte{height:auto;min-height:60px}
  header.kopf nav{border-top:1px solid var(--nebel)}
  header.kopf nav a{color:var(--tinte)}
  header.kopf nav a::after{color:var(--blatt)}
}

/* --- Startseite: breit, mit rollender Kugel --- */
main.startseite{max-width:1120px}
.einstieg{margin:30px 0 10px}
.einstieg.mit-bild{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.einstieg-bild{position:relative;height:clamp(220px,30vw,340px);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--rosa),transparent 72%)}
.einstieg-bild svg{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .einstieg-bild .kugel{animation:kugelrollt 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes kugelrollt{0%{transform:translateX(-26%) rotate(0)}50%{transform:translateX(26%) rotate(360deg)}100%{transform:translateX(-26%) rotate(0)}}
}
.vorspann{font-size:19px;color:var(--grau);max-width:34rem}
.einstieg-knopf{display:inline-block;background:var(--moos);color:#fff;text-decoration:none;font-weight:700;
  padding:13px 22px;border-radius:10px;line-height:1.3}
.einstieg-knopf:hover{background:var(--rinde);color:#fff}
@media(max-width:820px){
  .einstieg.mit-bild{grid-template-columns:1fr;gap:18px}
  .einstieg-bild{height:150px;order:-1}
}

.katkacheln{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.katkacheln a{background:#fff;border:1px solid var(--nebel);border-radius:999px;padding:7px 14px;
  font-size:14.5px;color:var(--rinde);text-decoration:none;font-weight:600}
.katkacheln a:hover{border-color:var(--blatt);color:var(--moos)}

.liste-titel{margin-top:34px}
main.startseite .liste{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:14px 0 10px}
main.startseite .karte{flex-direction:column;gap:10px;padding:20px;background:#fff;border:1px solid var(--nebel);
  border-radius:14px;border-bottom:1px solid var(--nebel);transition:border-color .15s,transform .15s}
main.startseite .karte:hover{border-color:var(--moos);transform:translateY(-2px)}
main.startseite .karte .kbild img{width:100%;height:auto;aspect-ratio:16/10;border-radius:8px}
main.startseite .karte h2{font-size:19px;line-height:1.25}
main.startseite .karte p{font-size:15px}
@media(max-width:900px){main.startseite .liste{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){main.startseite .liste{grid-template-columns:1fr}}

/* --- Beitrag --- */
.brot a{color:var(--grau)}
.avatar,.autorbox .gross{background:var(--rosa);color:var(--moos)}
.kurzfassung{background:var(--rosa);border-left-color:var(--blatt);border-radius:0 12px 12px 0}
.kurzfassung b{color:var(--moos)}
.pro,.contra,.detail,.fuerwen,.tipp,.achtung,.erfahrung,.autorbox,.box,table{border-radius:12px}
.detail{border-top-color:var(--moos)}
.detail b.baukopf{background:var(--rosa);color:var(--moos)}
.detail dt,.erfahrung .titel,.box .rang{color:var(--moos)}
.erfahrung{background:#fff;border:1px solid var(--nebel)}
th{background:#FBF1EC}
.box{border:2px solid var(--blatt);border-left-width:2px}
.kauf,.emp-knopf{background:var(--moos);border-color:var(--moos);color:#fff}
.kauf:hover{background:var(--rinde);color:#fff}
.spar,.verf.ok{background:var(--rosa);color:var(--rinde)}
.verf.ok::before{background:var(--rinde)}
.teilen a{color:var(--moos)}
.teilen a:hover{border-color:var(--blatt);color:var(--blatt)}
.weiter a{color:var(--moos)}
.weiter a:hover,.weiterkarte:hover{border-color:var(--blatt);color:var(--blatt)}
.blaettern a{color:var(--moos)}

/* --- Empfehlungen --- */
.empfehlungen{border-radius:16px;border-color:var(--nebel)}
.emp-karte{border-radius:12px}
.emp-karte:hover{border-color:var(--blatt)}
.emp-bild{background:#fff}
.emp-label{background:var(--blatt)}
main.startseite .empfehlungen{padding:20px}

/* --- Fuß: hell statt dunkelgrün --- */
footer{background:#fff;color:var(--grau);border-top:1px solid var(--nebel)}
footer a{color:var(--grau)}
footer a:hover{color:var(--moos)}
footer .spalte{max-width:1120px}

/* Kategorien am Handy als wischbare Zeile */
@media(max-width:820px){
  .katkacheln{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;padding:2px 20px 6px}
  .katkacheln::-webkit-scrollbar{display:none}
  .katkacheln a{flex:0 0 auto;white-space:nowrap}
}