/* ==========================================================================
   textiliendruck.at – eigenes Erscheinungsbild (TX-DESIGN-001, 30.10.2026)
   Farben aus dem Logo: Cyan · Magenta · Gelb auf Weiß, Schrift Outfit + Inter.
   Liegt über site.css – nur diese Datei macht die Seite anders als
   tshirts-drucken.at und abdex.at/textildruck.
   ========================================================================== */
:root{
  color-scheme: light only;
  --bg:#ffffff; --bg2:#f4f7fb; --bg3:#e8eef5; --line:#e2e8f0; --line2:#cbd5e1;
  --txt:#0f172a; --txt2:#475569; --txt3:#64748b;
  --c:#0aa1e6; --c2:#38b6f0; --c-dark:#0782bd; --m:#e5197f; --y:#ffc21a; --y-dark:#e5a200;
  --o:#0aa1e6; --o2:#38b6f0; --o-dark:#0782bd; --auf-o:#ffffff;
  --glas:#ffffff; --buehne1:#f8fbff; --buehne2:#eaf4fc;
  --dunkel:#0b1b2b; --dunkel2:#11263a; --dunkel-line:#1d3a55; --auf-dunkel:#eef4fa; --auf-dunkel2:#a9bccd;
  --fh:"Outfit","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
  --schatten:0 8px 28px rgba(15,23,42,.08);
  --schatten-gross:0 24px 60px rgba(15,23,42,.14);
  --cmyk:linear-gradient(90deg,var(--c) 0 33.3%,var(--m) 33.3% 66.6%,var(--y) 66.6% 100%);
}
html{background:#fff}
html,body{overflow-x:clip!important}
body{overflow-y:visible!important}
html:has(.nav.open){overflow-y:hidden!important}
body{background:#fff;color:var(--txt);font-family:var(--fb);font-size:16.5px;letter-spacing:-.003em}
body:before{content:"";position:fixed;left:0;right:0;top:0;height:4px;background:var(--cmyk);z-index:200}

/* Überschriften: normal geschrieben statt GROSSBUCHSTABEN, rund und freundlich */
h1,h2,h3{font-family:var(--fh);font-weight:800;text-transform:none;letter-spacing:-.025em;line-height:1.04}
h1{font-size:clamp(38px,4.6vw,62px)}
h2{font-size:clamp(30px,4.2vw,52px)}
h3{font-size:clamp(19px,1.8vw,23px);font-weight:700;letter-spacing:-.015em}
.o{color:var(--c)}
h1 .o,h2 .o{background:linear-gradient(90deg,var(--c),var(--m));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Inhalte sofort sichtbar – keine Einblend-Animation (verhindert leere Seiten beim schnellen Scrollen) */
.rv,.rv.in{opacity:1!important;transform:none!important;transition:none!important}

/* ---------------------------------------------------------------- Kopf */
.kopf{position:sticky;top:4px;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)!important;box-shadow:none}
.kopf.scrollt{box-shadow:0 6px 24px rgba(15,23,42,.07)}
.kopf-in{height:78px}
.logo img{height:46px!important;width:auto!important}
.logo .logo-zusatz{display:none}
.nav{gap:6px}
.nav>a{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:600;color:var(--txt2);padding:9px 14px;border:0!important;border-radius:999px}
.nav>a:hover,.nav>a.on{color:var(--txt);background:var(--bg2)}
.nav>a.btn,.nav>a.nav-cta{background:var(--txt)!important;color:#fff!important;border-radius:999px;padding:12px 22px;margin-left:8px;box-shadow:none}
.nav>a.btn:hover{background:var(--c)!important}
.nav-deal i,.nav-korb i{background:var(--m);color:#fff}
.burger span{background:var(--txt);height:2.5px;border-radius:2px}
@media(max-width:900px){
  .kopf-in{height:66px}
  .logo img{height:36px!important}
  .nav{position:fixed!important;top:70px!important;left:0;right:0;bottom:0;height:calc(100vh - 70px);height:calc(100dvh - 70px);background:#fff!important;z-index:150;padding:18px 20px 40px;gap:4px;overflow-y:auto;border-top:1px solid var(--line);box-shadow:0 30px 60px rgba(15,23,42,.18)}
  .nav>a{font-size:22px;font-weight:700;color:var(--txt);width:100%;padding:16px 4px;border-radius:0;border-bottom:1px solid var(--line)!important}
  .nav>a:hover,.nav>a.on{background:none;color:var(--c)}
  .nav>a.btn,.nav>a.nav-cta{width:100%;justify-content:center;margin:16px 0 0;padding:18px;font-size:17px;border-bottom:0!important}
}

/* ---------------------------------------------------------------- Buttons, Chips, Eyebrow */
.btn{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:16px;font-weight:700;border-radius:999px;padding:16px 26px;border:2px solid var(--txt);color:var(--txt);background:#fff}
.btn:hover{background:var(--txt);color:#fff;border-color:var(--txt)}
.btn-o{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 12px 28px rgba(10,161,230,.32)}
.btn-o:hover{background:var(--c-dark);border-color:var(--c-dark);color:#fff}
.eyebrow{display:inline-flex;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--txt);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 10px;gap:10px;margin-bottom:20px}
.eyebrow:before{width:22px;height:8px;border-radius:4px;background:var(--cmyk)}
.chip{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;border-radius:999px;padding:10px 16px;border:1px solid var(--line2);color:var(--txt2);background:#fff}
.chip:hover{border-color:var(--c);color:var(--txt)}
.chip.on{background:var(--txt);border-color:var(--txt);color:#fff}
.chip.on small{color:rgba(255,255,255,.7)}

/* ---------------------------------------------------------------- Hero: Text links, Bild rechts – am Handy Text zuerst */
.hero{padding:70px 0 30px;background:
  radial-gradient(600px 380px at 92% 8%,rgba(10,161,230,.13),transparent 70%),
  radial-gradient(520px 340px at 70% 92%,rgba(229,25,127,.09),transparent 70%),
  radial-gradient(420px 300px at 4% 12%,rgba(255,194,26,.14),transparent 70%),#fff}
.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr!important}}
.hero h1{font-size:clamp(38px,4.4vw,62px)}
.hero p.lead{color:var(--txt2);font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.hero-visual{border-radius:32px;border:0;background:linear-gradient(145deg,#eaf6fd 0%,#fdeef6 55%,#fff6dc 100%);box-shadow:var(--schatten-gross)}
.hero-visual .tag{background:#fff;color:var(--txt);border-radius:999px;font-family:var(--fh);text-transform:none;letter-spacing:0;font-weight:600}
.hero-visual .badge{background:var(--txt);color:#fff;border-radius:20px}
.hero-visual .badge b{font-family:var(--fh);color:var(--y)}
.hero-preis{background:#fff!important;color:var(--txt)!important;border-radius:999px;box-shadow:var(--schatten)}
.hero-drop{border-radius:20px;border:2px dashed var(--c)!important;background:rgba(255,255,255,.92)!important;color:var(--txt)!important}
.hero-drop svg{fill:var(--m)!important}
.hero-fuss{color:var(--txt3)}
.hero-fuss b{color:var(--txt)}
@media(max-width:900px){
  .hero{padding:34px 0 10px}
  .hero-grid{gap:28px}
  .hero-visual{order:2!important;border-radius:24px}
  .hero h1{font-size:clamp(34px,9.5vw,54px)}
}

/* Vertrauensleiste: Symbole in den drei Logofarben */
.vertrauen{border:0;background:var(--bg2);border-radius:24px;padding:26px 28px}
.vertrauen li:nth-child(4n+1) svg{background:rgba(10,161,230,.12);fill:var(--c)}
.vertrauen li:nth-child(4n+2) svg{background:rgba(229,25,127,.10);fill:var(--m)}
.vertrauen li:nth-child(4n+3) svg{background:rgba(255,194,26,.22);fill:var(--y-dark)}
.vertrauen li:nth-child(4n+4) svg{background:rgba(15,23,42,.08);fill:var(--txt)}
.vertrauen b{font-family:var(--fh);font-weight:700}
.marken-leiste{border:0;background:#fff}
.marken-in a{font-family:var(--fh);text-transform:none;font-weight:700;color:var(--txt3)}
.marken-in a.mehr{color:var(--c)}

/* ---------------------------------------------------------------- Abschnitte und Kacheln */
.sek{padding:84px 0}
.sek-kopf{align-items:flex-end}
.kachel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px 28px 28px;box-shadow:var(--schatten);border-top:0}
.kachel:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c)}
.grid3 .kachel:nth-child(3n+2):before{background:var(--m)}
.grid3 .kachel:nth-child(3n+3):before{background:var(--y)}
.kachel .nr{font-family:var(--fh);font-weight:800;color:var(--txt);opacity:.06;font-size:72px}
.kachel .sub{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:14px;color:var(--c)}
.grid3 .kachel:nth-child(3n+2) .sub{color:var(--m)}
.grid3 .kachel:nth-child(3n+3) .sub{color:var(--y-dark)}
.kat{border-radius:22px;background:linear-gradient(180deg,#fff,var(--bg2));border:1px solid var(--line)}
.kat:hover{border-color:var(--c);box-shadow:var(--schatten)}
.kat b{font-family:var(--fh);text-transform:none;font-size:18px;font-weight:700}
.kat small{text-transform:none;letter-spacing:0;font-weight:500}
.farbkachel{border-radius:20px}

/* Produkt- und Angebotskarten */
.pgrid>*{border-radius:22px!important}
.karte,.pkarte,.pgrid a{border-radius:22px}
.deal{border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--schatten)}
.deal:hover{border-color:var(--c)}
.deal-bild{background:linear-gradient(160deg,#f6fbff,#eef3f8)}
.deal-rabatt,.angebot-fahne{background:var(--m)!important;color:#fff!important;border-radius:999px!important;font-family:var(--fh);font-weight:800;text-transform:none;letter-spacing:0}
.mini-uhr{background:var(--txt);color:#fff;border:0}
.mini-uhr::before{background:var(--y)}
.uhr{border-radius:20px;background:var(--bg2);border:0}
.uhr-zahlen b{font-family:var(--fh);background:#fff;border-radius:12px}
.pgrid .deal{border:1px solid var(--line)}

/* Für wen, Ablauf, Zahlen, FAQ */
.fw{border:0;gap:14px;border-radius:0;overflow:visible}
.fw div{border:1px solid var(--line)!important;border-radius:20px;background:#fff}
.fw h3{font-size:20px}
.ablauf div{border-top:0;background:var(--bg2);border-radius:20px;padding:24px 22px}
.ablauf div:before{font-family:var(--fh);font-weight:800;font-size:40px;color:var(--c)}
.ablauf div:nth-child(2):before{color:var(--m)}
.ablauf div:nth-child(3):before{color:var(--y-dark)}
.ablauf div:nth-child(4):before{color:var(--txt)}
.zahlen{border:0;border-radius:24px;background:var(--txt);color:#fff;overflow:hidden}
.zahlen div{border-color:rgba(255,255,255,.1)!important}
.zahlen b{font-family:var(--fh);font-weight:800;color:var(--y)}
.zahlen div:nth-child(2) b{color:var(--c2)}
.zahlen div:nth-child(3) b{color:#ff5aa8}
.zahlen span{color:rgba(255,255,255,.7);text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
.faq details{border-top:1px solid var(--line)}
.faq summary{font-family:var(--fh);font-weight:700;font-size:18px}
.faq summary:after{font-family:var(--fh);color:var(--m);font-weight:700}

/* Preisrechner und Verfahrensberater */
.rechner-eingabe{background:var(--bg2);border-radius:26px}
.rechner-ergebnis{border-radius:26px}
.rechner-feld>label{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:14px;color:var(--txt2)}
.rechner-chips button{border-radius:999px!important;font-family:var(--fh)}
.rechner-chips button.on{background:var(--c)!important;border-color:var(--c)!important;color:#fff!important}
.rechner-stueck b{font-family:var(--fh);font-weight:800}

/* Hinweis-, CTA- und Fußbereich */
.cta{background:linear-gradient(120deg,var(--c) 0%,#3a6fd8 45%,var(--m) 100%);color:#fff;padding:84px 0}
.cta h2{color:#fff!important}
.cta p{color:rgba(255,255,255,.9)}
.cta .btn{background:#fff;border-color:#fff;color:var(--txt)}
.cta .btn:hover{background:var(--txt);border-color:var(--txt);color:#fff}
.cta .eyebrow{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff!important}
.fuss{background:var(--dunkel);border-top:0;position:relative}
.fuss:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--cmyk)}
.fuss h4{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:15px;color:#fff}
.fuss-grid a,.fuss-grid span{color:var(--auf-dunkel2)}
.fuss-grid a:hover{color:var(--c2)}
.fuss .logo img{height:40px!important}

/* Seitenköpfe, Katalog, Produktseite */
.seitenkopf{background:linear-gradient(180deg,#f3f9fe,#fff)}
.brotkrumen{font-family:var(--fh)}
.filter,.filter-knopf{border-radius:18px}
.filter-knopf{font-family:var(--fh);text-transform:none;letter-spacing:0;font-size:15px}
.filter-knopf i{background:var(--m)}
.preis-hero{background:var(--txt);border-radius:24px}
.preis-hero-zahl b{font-family:var(--fh);font-weight:800;color:#fff}
.preis-hero small{text-transform:none;letter-spacing:0;font-size:12.5px}
.p-code b{color:var(--c)}
.p-titel h1{font-weight:800}
.dtf-karte,.groessen-tabelle,.preisbox,.eckdaten>div,.specs table,.alt-veredelung{border-radius:20px!important}
.ampel{border-radius:999px}
.h-titel{font-family:var(--fh);text-transform:none;letter-spacing:-.01em;font-size:20px;font-weight:700}
.kleb{border-top:3px solid var(--c)}
.cookie-hinweis{border-radius:18px}
.th-antwort{border-left-color:var(--m)!important;border-radius:0 20px 20px 0!important}
.th-antwort b{color:var(--m)!important}
.th-text h2{text-transform:none!important;font-family:var(--fh)}
.antwort b{color:var(--c)}
.as-fab{background:var(--txt)!important}