/* ShirtBOX Startseite – dunkel, sportlich, laut. Baut auf shirtbox.css und marke.css auf. */
body.home{
  --night:#090c13;--night-2:#121826;--paper:#f4f1ea;--muted:#9aa3b2;--muted-2:#c9cfd8;
  --fire:linear-gradient(100deg,#ff3d2e,#ff7a2b 55%,#ffb43a);
  background:transparent;color:var(--paper)}
/* Feine Körnung über der ganzen Seite gegen den "sterilen" Look. */
body.home::before{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.home h1,.home h2,.home h3{color:var(--paper)}

/* Kopfzeile auf dunklem Grund */
.home .masthead{background:#090c13b8;border-bottom-color:#ffffff12}
.home .brand{color:var(--paper)}
.home .masthead nav a{color:#b9c0cc}
.home .masthead nav a:hover{background:#ffffff12;color:#fff}
.home .masthead nav a[aria-current=page]{background:var(--paper);color:var(--night)}
.home .language-switch{background:#ffffff12}
.home .language-switch button{color:#b9c0cc}
.home .language-switch button.active{background:var(--paper);color:var(--night)}
.home .head-cta{background:var(--fire);color:var(--night)}
@media(max-width:860px){.home .masthead nav a{background:#ffffff0d}}
/* Unsichtbarer Zugang zur Verwaltung: kleine Fläche direkt rechts neben dem Logo. */
.admin-spot{flex:none;align-self:stretch;width:36px;min-height:36px;margin-left:-12px;cursor:default;-webkit-tap-highlight-color:transparent}

/* Hero */
.hx{position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) 0 clamp(64px,8vw,110px)}
.hx-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.hx-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 16px 8px 12px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff1f;color:#ffb48f;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hx-dot{width:8px;height:8px;border-radius:50%;background:#ff5b2e;box-shadow:0 0 0 0 #ff5b2e99;animation:hxPulse 2s infinite}
@keyframes hxPulse{70%{box-shadow:0 0 0 10px #ff5b2e00}100%{box-shadow:0 0 0 0 #ff5b2e00}}
.hx h1{margin:0 0 26px;font-family:"Unbounded","Segoe UI",system-ui,sans-serif;font-size:clamp(36px,5.1vw,74px);font-weight:800;line-height:1.02;letter-spacing:-.05em}
.hx h1 span{display:block}
.hx-grad{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hx-outline{margin-top:.18em;font-size:.5em;font-weight:700;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.4px #f4f1eab3}
/* Preiszeile direkt unter der Überschrift */
.hx-price{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-8px 0 24px;padding:8px 16px;border-radius:999px;background:#ffffff0a;border:1px solid #ff7a2b66;color:var(--muted-2);font-size:clamp(14px,1.3vw,16px);font-weight:650;line-height:1.2}
.hx-price b{font-family:"Unbounded","Segoe UI",system-ui,sans-serif;font-size:1.15em;font-weight:800;letter-spacing:-.02em;color:var(--paper)}
.hx-price i{font-style:normal;color:#ff7a2b}
.hx-price .hx-price-off{padding:2px 9px;border-radius:999px;background:var(--fire);color:var(--night);font-size:1em}
.hx-facts li:first-child{display:none}/* Preis steht schon in der Preiszeile */
.hx-lead{max-width:540px;margin:0 0 30px;color:#aab2c0;font-size:clamp(16px,1.45vw,19px)}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
.hx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;border-radius:999px;font-size:17px;font-weight:800;text-decoration:none;overflow:hidden;transition:transform .2s,box-shadow .2s}
.hx-btn-main{background:var(--fire);color:var(--night);box-shadow:0 12px 40px #ff5b2e59}
.hx-btn-main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.hx-btn-main:hover{color:var(--night);transform:translateY(-3px);box-shadow:0 18px 50px #ff5b2e80}
.hx-btn-main:hover::after{transform:translateX(120%)}
.hx-btn-ghost{color:var(--paper);box-shadow:inset 0 0 0 2px #ffffff33}
.hx-btn-ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper);transform:translateY(-3px)}
.hx-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hx-facts li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#ffffff08;border:1px solid #ffffff14;color:var(--muted-2);font-size:13.5px;font-weight:650}
.hx-facts li::before{content:"✓";color:#7ff0a8;font-weight:900}

/* Shirt-Bühne: drei Karten im Fächer, schweben leicht, fächern beim Darüberfahren auf. */
.hx-stage{position:relative;height:clamp(380px,42vw,560px);margin-top:clamp(36px,5vw,72px)}
.hx-360{display:none!important}/* ersetzt durch das seitenweite Wasserzeichen in shirtbox.css */
.hx-360-alt{position:absolute;left:50%;top:50%;translate:-50% -54%;font-family:"Unbounded",sans-serif;font-size:clamp(120px,17vw,250px);font-weight:900;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:2px #ffffff17;white-space:nowrap;user-select:none}
.hx-card{position:absolute;width:56%;margin:0;border-radius:26px;overflow:hidden;background:#6f6f6f;border:1px solid #ffffff26;box-shadow:0 30px 80px #000000b3;transition:rotate .5s cubic-bezier(.3,1.4,.5,1),left .5s cubic-bezier(.3,1.4,.5,1),right .5s cubic-bezier(.3,1.4,.5,1);animation:hxFloat 6s ease-in-out infinite}
.hx-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.hx-card.k1{left:0;top:9%;rotate:-9deg;animation-delay:-2s}
.hx-card.k2{right:0;top:0;rotate:8deg;animation-delay:-4s}
.hx-card.k3{left:22%;bottom:0;width:58%;z-index:2;rotate:-1deg;border:0;box-shadow:0 0 0 2px #ff7a2b,0 30px 90px #ff5b2e59,0 30px 80px #000000b3}
/* Kartenwechsel (hero-karten.js): Karte dreht sich weg, neues Shirt wird aufgedeckt. transform ist frei, da Schweben und Neigung translate/rotate nutzen. */
.hx-card{transform:perspective(900px) rotateY(0);transition:rotate .5s cubic-bezier(.3,1.4,.5,1),left .5s cubic-bezier(.3,1.4,.5,1),right .5s cubic-bezier(.3,1.4,.5,1),transform .42s ease-out,filter .42s ease-out}
.hx-card.is-flipping{transform:perspective(900px) rotateY(90deg) scale(.94);filter:brightness(1.35);transition:rotate .5s cubic-bezier(.3,1.4,.5,1),left .5s cubic-bezier(.3,1.4,.5,1),right .5s cubic-bezier(.3,1.4,.5,1),transform .42s ease-in,filter .42s ease-in}
.hx-stage:hover .k1{left:-4%;rotate:-14deg}
.hx-stage:hover .k2{right:-4%;rotate:13deg}
@keyframes hxFloat{50%{translate:0 -12px}}
.hx-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:18px;background:#121826d9;border:1px solid #ffffff1f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px #0009;color:var(--paper);font-size:14px;font-weight:750;line-height:1.25;animation:hxFloat 5s ease-in-out infinite}
.hx-badge span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--fire);font-size:18px}
.hx-badge small{display:block;color:#8f98a8;font-size:12px;font-weight:600}
.hx-badge.q1{left:-5%;bottom:14%}
.hx-badge.q2{right:-3%;top:44%;animation-delay:-2.5s}

/* Anlässe: Überschrift + Karussell. Die Namen drehen sich weiter; der mittlere wird gross und leuchtet (hero-karten.js). */
.occ{position:relative;z-index:2;padding:16px 0}
.occ-title{margin:0 0 4px;padding:0 var(--gutter);font-family:"Unbounded","Segoe UI",system-ui,sans-serif;font-size:clamp(12px,1.15vw,16px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#f4f1eab3}
.occ-carousel{overflow:hidden;padding:4px 0;perspective:900px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.occ-track{display:flex;align-items:center;gap:clamp(10px,2vw,28px);width:max-content;margin:0;padding:0;list-style:none;transition:transform .75s cubic-bezier(.65,0,.25,1);transform-style:preserve-3d}
.occ-track li{flex:none;font-family:"Unbounded","Segoe UI",system-ui,sans-serif;font-size:clamp(24px,min(3.3vw,5.2vh),46px);font-weight:800;letter-spacing:-.035em;line-height:1.3;white-space:nowrap;color:#f4f1ea;opacity:.32;transform:scale(.5);transition:transform .75s cubic-bezier(.3,1.45,.5,1),opacity .75s}
.occ-track li.is-left{transform:scale(.5) rotateY(45deg)}
.occ-track li.is-right{transform:scale(.5) rotateY(-45deg)}
.occ-track li.is-active{opacity:1;transform:scale(1);background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 22px #ff5b2e59)}

/* Beispiele */
.showcase{position:relative;padding:clamp(80px,10vw,130px) 0 clamp(64px,8vw,104px);overflow:hidden}
.showcase::before{content:"";position:absolute;left:50%;top:52%;width:min(1100px,120vw);height:520px;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#ff5b2e2b,transparent);pointer-events:none}
.showcase-head{position:relative;max-width:720px;margin:0 auto clamp(20px,3vw,36px);padding:0 var(--gutter);text-align:center}
.showcase-head h2{margin:0 0 12px;font-family:"Unbounded",sans-serif;font-size:clamp(28px,4.2vw,56px);font-weight:800;letter-spacing:-.045em}
.showcase-head p{margin:0;color:var(--muted)}
.home .box-stage{max-width:1100px}
.home .box-item img{filter:drop-shadow(0 26px 30px #000000d9)}
.showcase-cta{position:relative;display:flex;justify-content:center;margin-top:clamp(-40px,-3vw,0px);padding:0 var(--gutter)}

/* Nach dem Laufband folgt nur noch die Fusszeile – sie sitzt auch auf hohen Bildschirmen unten. */
.home .shell{display:flex;flex-direction:column;min-height:100vh}
.home .occ{margin-bottom:clamp(40px,6vw,70px)}
.home .site-footer{margin-top:auto}

/* Computer: Hero und Anlässe passen zusammen auf den ersten Bildschirm und stehen senkrecht mittig. Grössen richten sich nach der Bildschirmhöhe. */
@media(min-width:901px){
  .hx{flex:1;display:flex;align-items:center;padding:clamp(8px,2vh,48px) 0}
  .hx-grid{width:100%}
  .hx-kicker{margin-bottom:clamp(8px,1.6vh,22px)}
  .hx h1{font-size:clamp(34px,min(5.1vw,6.4vh),74px);margin-bottom:clamp(12px,2.6vh,26px)}
  .hx-price{margin:calc(-1 * clamp(4px,1vh,10px)) 0 clamp(12px,2.6vh,24px)}
  .hx-lead{max-width:600px;margin-bottom:clamp(14px,3vh,30px);font-size:clamp(15px,min(1.45vw,2.2vh),19px)}
  .hx-actions{margin-bottom:clamp(12px,2.6vh,28px)}
  .hx-btn{min-height:clamp(48px,6.4vh,58px)}
  .hx-facts li{padding:6px 12px;font-size:13px}
  .hx-stage{--sh:clamp(300px,54vh,560px);height:var(--sh);width:min(100%,var(--sh));margin:0 auto}
  .occ{padding-top:clamp(4px,1vh,14px);padding-bottom:clamp(4px,1vh,14px)}
  .home .occ{margin-bottom:clamp(10px,2.4vh,40px)}
}

/* Tablet und Handy */
@media(max-width:900px){
  .hx-grid{grid-template-columns:1fr}
  .hx-copy{text-align:center}
  .hx-lead{margin-left:auto;margin-right:auto}
  .hx-actions,.hx-facts{justify-content:center}
  .hx-stage{width:100%;max-width:460px;height:min(92vw,420px);margin:0 auto}
}
/* Handy: Überschrift → wechselnde Shirts → „Jetzt T-Shirt designen“. Erklärtext, zweiter Knopf und Fakten entfallen. */
@media(max-width:700px){
  /* Alles auf einen Bildschirm: kleinere Überschrift, Bühne nach Bildschirmhöhe, kein Kicker. */
  /* Der Hero füllt die Höhe zwischen Kopf- und Fusszeile; Überschrift, Bilder und Knopf verteilen sich gleichmässig. */
  .home .shell{min-height:100vh;min-height:100svh}
  .hx{flex:1;display:flex;padding:12px 0 4px}
  .hx-grid{flex:1;align-content:space-evenly;gap:10px}
  .hx-copy{display:contents}
  .hx-kicker,.hx-lead,.hx-btn-ghost,.hx-facts{display:none}
  .hx h1{order:2;margin-bottom:0}
  .hx-price{order:2;justify-self:center;flex-wrap:nowrap;margin:0;padding:5px 11px;gap:6px;font-size:clamp(11px,3.3vw,13px);white-space:nowrap}
  .hx-price .hx-price-off{padding:1px 7px}
  .hx-stage{order:3;--sh:clamp(180px,min(78vw,34vh),340px);--sh:clamp(180px,min(78vw,34svh),340px);height:var(--sh);width:min(100%,calc(var(--sh)*1.2));margin:0 auto}
  .hx-actions{order:4;margin:0}
  .hx-btn{min-height:52px}
  .home .occ{padding-top:10px;padding-bottom:6px;margin-bottom:10px}
  .occ-title{font-size:11.5px}
  .occ-track{gap:0}
  .occ-track li{font-size:clamp(20px,6.2vw,25px)}
  .occ-track li{transition:transform .75s cubic-bezier(.3,1.45,.5,1),opacity .75s,margin .75s cubic-bezier(.65,0,.25,1)}
  .occ-track li:not(.is-active){margin:0 -1.2em}
  .occ-carousel{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
}
@media(max-width:520px){
  .hx h1{font-size:clamp(25px,7.6vw,32px)}
  .hx-actions .hx-btn{width:100%}
  .hx-badge{gap:7px;padding:6px 10px 6px 6px;border-radius:13px;font-size:11.5px}
  .hx-badge span{width:26px;height:26px;border-radius:8px;font-size:14px}
  .hx-badge small{font-size:10px}
  .hx-badge.q1{left:-2%;bottom:4%}.hx-badge.q2{right:-2%;top:46%}
}
/* iPad hochkant (und andere Tablets hochkant): eine Spalte, alles mittig. Überschrift, Preis und Knopf oben,
   darunter die Shirts in voller Grösse – Kicker, Erklärtext und Fakten entfallen, damit Shirts und Anlässe auf den ersten Bildschirm passen. */
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait){
  .hx{flex:1;display:flex;align-items:stretch;padding:clamp(14px,2.2vh,36px) 0 clamp(6px,1.2vh,18px)}
  .hx-grid{flex:1;width:100%;grid-template-columns:1fr;align-content:space-evenly;gap:clamp(14px,2.4vh,34px)}
  .hx-copy{text-align:center}
  .hx h1{font-size:clamp(40px,6.2vw,62px);margin-bottom:clamp(14px,2vh,24px)}
  .hx-price{margin:0 0 clamp(16px,2.4vh,28px)}
  .hx-kicker,.hx-lead,.hx-facts{display:none}
  .hx-actions{justify-content:center;margin:0}
  .hx-stage{--sh:clamp(250px,min(62vw,100vh - 700px),560px);--sh:clamp(250px,min(62vw,100svh - 700px),560px);height:var(--sh);width:min(100%,calc(var(--sh) * 1.2));max-width:none;margin:0 auto}
  .home .occ{margin-bottom:clamp(14px,2.6vh,36px)}
}
/* Kleinere iPads hochkant: Shirts sind kleiner – die Hinweis-Schilder würden sie verdecken. */
@media(min-width:701px) and (max-width:1100px) and (orientation:portrait) and (max-height:1020px){.hx-badge{display:none}}
@media(prefers-reduced-motion:reduce){.hx-card,.hx-badge,.hx-dot{animation:none}}