/* Cartel Kingpin - Website (generiert von Tools/make_site.py, nicht von Hand aendern) */
@font-face{font-family:"Titan One";src:url("/cartelkingpin/fonts/TitanOne-Regular.ttf") format("truetype");font-display:swap}
:root{--ink:#3b2415;--soft:#6e4b31;--link:#9a3a09;--card:#fff8e8;--card2:#fbe8c4;--head:#7a3310;--rule:#e2c28c;
--page:#e7cf9e;--wood:#4a230b;--cream:#fff8e6;--gold:#ffd04d;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--ink:#f2e6d2;--soft:#cdb595;--link:#ffbf5f;--card:#2e1f14;--card2:#22170e;
--head:#ffcd55;--rule:#5a4029;--page:#100904}}
*,*::before,*::after{box-sizing:border-box}
html.l-en [data-l]:not([data-l="en"]),html.l-de [data-l]:not([data-l="de"]),html.l-es [data-l]:not([data-l="es"]),html.l-fr [data-l]:not([data-l="fr"]){display:none!important}
html{background:var(--page);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);overflow-wrap:break-word;
font:16.5px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* Strand hinter allem: so hoch wie der Bildschirm mit eingeklappter Adressleiste (lvh). Mit inset:0 wurde er beim
   ersten Scrollen am Handy mehrfach neu skaliert (die Adressleiste klappt ein) und rutschte hoch und runter. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:-1;
background:url("/cartelkingpin/img/beach.webp") 50% 62%/cover no-repeat}
@media (prefers-color-scheme:dark){body::before{background-image:linear-gradient(rgba(8,5,2,.62),rgba(8,5,2,.62)),
url("/cartelkingpin/img/beach.webp")}}
img{max-width:100%}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.tt{font-family:"Titan One",system-ui,sans-serif;font-weight:400;letter-spacing:.01em;overflow-wrap:normal;hyphens:manual;color:var(--cream);--o:2px;
--d:calc(var(--o)*.72);text-shadow:0 var(--o) 0 var(--wood),var(--o) 0 0 var(--wood),calc(var(--o)*-1) 0 0 var(--wood),
0 calc(var(--o)*-1) 0 var(--wood),var(--d) var(--d) 0 var(--wood),calc(var(--d)*-1) var(--d) 0 var(--wood),
var(--d) calc(var(--d)*-1) 0 var(--wood),calc(var(--d)*-1) calc(var(--d)*-1) 0 var(--wood),
0 calc(var(--o)*2) 0 var(--wood),0 calc(var(--o)*3) 6px rgba(0,0,0,.35)}
/* Kopf: Flaggen mittig oben, darunter das kleine Logo */
.top{display:flex;flex-direction:column;align-items:center;gap:2px;padding:max(10px,env(safe-area-inset-top)) 12px 4px}
.mini-logo{display:block;border-radius:12px}
.mini-logo img{display:block;height:68px;width:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.langs{order:-1;display:flex;justify-content:center;gap:2px}
.langs button{appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:3px;cursor:pointer;
width:46px;height:54px;display:grid;place-items:center;border-radius:12px;opacity:.7;
transition:transform .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
.langs button img{display:block;width:38px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.langs button[aria-pressed="true"]{opacity:1;transform:scale(1.14)}
.langs button:hover{opacity:1}
/* Startseite */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 36px);min-height:calc(100svh - 36px);
display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px 34px;
background:url("/cartelkingpin/img/beach.webp") 50% 70%/cover no-repeat}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;z-index:-1;
opacity:0;transition:opacity .8s}
.hero video.on{opacity:1}
@media (min-aspect-ratio:1/1){.hero{background-position:50% 64%}.hero video{object-position:50% 64%}}
.hero .top{align-self:stretch;padding-left:0;padding-right:0}
.hero h1{margin:0}
.hero-logo{display:block;width:min(74vw,40svh,430px);height:auto;margin:-6px auto 0;
filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.pitch{margin:2px auto 0;max-width:19em;font-size:clamp(21px,6vw,36px);line-height:1.18;--o:2.5px}
.hero-asila{display:block;height:clamp(170px,31svh,400px);width:auto;margin:auto auto 0;
filter:drop-shadow(10px 8px 6px rgba(70,40,10,.35))}
/* Schilder und Knoepfe: Original-Grafiken in ihren Proportionen, Schrift auf dem Holz */
.sign,.plank,.go,.plate{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
background:center/100% 100% no-repeat;line-height:1.15;filter:drop-shadow(0 4px 5px rgba(40,20,5,.35))}
.sign{width:min(88vw,440px);aspect-ratio:900/221;margin:-4px auto 0;padding:0 15% 1%;background-image:url("/cartelkingpin/img/sign.webp");
font-size:clamp(15px,4.3vw,22px)}
.plank,.go{width:min(100%,280px);aspect-ratio:420/177;margin:0 auto;padding:0 18% 2%;font-size:clamp(17px,4.8vw,21px)}
.plank{background-image:url("/cartelkingpin/img/btn-wood.webp")}
.go{background-image:url("/cartelkingpin/img/btn-green.webp")}
.plank:hover,.plank:active,.go:hover,.go:active{filter:brightness(1.08) drop-shadow(0 4px 5px rgba(40,20,5,.35))}
.plate{width:min(100%,500px);aspect-ratio:1000/331;margin:0 auto 10px;padding:0 14% 1.5%;background-image:url("/cartelkingpin/img/title.webp");
font-size:clamp(19px,5.4vw,30px)}
.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 12px}
.lead{font-size:1.06em;text-align:center;margin:4px 0 10px}
.strip{display:flex;justify-content:center;align-items:flex-end;margin:10px auto 0;max-width:500px;padding:0 4%}
.strip img{width:19%;height:auto;margin:0 -2.4%;filter:drop-shadow(0 4px 4px rgba(60,30,5,.3))}
.strip img:nth-child(odd){transform:translateY(-6px)}
.cap{text-align:center;color:var(--soft);font-size:.95em;margin:4px 0 6px}
.navgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.navgrid li{text-align:center}
.navgrid p{margin:2px 0 0;color:var(--soft);font-size:.95em;line-height:1.4}
/* Karte: heller Kasten mit dunkelbraunem Rand (wie das Feld hud_panel im Spiel), das Titelschild sitzt auf der Kante */
.card{position:relative;margin:70px 0 30px;padding:0 14px 14px;border:4px solid var(--wood);border-radius:26px;
background:linear-gradient(180deg,var(--card),var(--card2));
box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 6px 0 rgba(74,35,11,.55),0 16px 28px rgba(0,0,0,.28)}
.card .plate{margin-top:-52px}
.home-page .card{margin-top:60px}
.md h2{font-family:"Titan One",system-ui,sans-serif;font-weight:400;color:var(--head);font-size:1.2rem;line-height:1.25;
margin:1.5em 0 .35em}
.md p,.md ul{margin:0 0 .85em}
.md ul{padding-left:1.25em}
.md li{margin:.2em 0}
.md a{text-underline-offset:2px;overflow-wrap:anywhere}
.md .meta{color:var(--soft);font-size:.9em;text-align:center}
.lic h2{text-align:center}
.lic .text{font-size:14.5px;line-height:1.55;border-top:2px dashed var(--rule);margin-top:10px;padding-top:12px}
.lic .text .c{text-align:center;font-weight:600}
.nf{text-align:center}
.nf .go{margin:6px auto 4px}
/* Fuss */
.foot{margin-top:auto;position:relative;background:linear-gradient(#3b200e,#22120a);color:#f1dfc2;text-align:center;
padding:26px 16px calc(20px + env(safe-area-inset-bottom));font-size:15px;border-top:4px solid #1a0d05}
.foot .studio img{display:block;height:26px;width:auto;margin:0 auto 12px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0 auto 10px;max-width:640px}
.foot a{color:#ffd98a;text-decoration:none;padding:4px 0}
.foot a:hover,.foot a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.foot .copy{margin:6px 0 0;opacity:.8}
@media (min-width:600px){
.navgrid{grid-template-columns:1fr 1fr}
.card{padding:0 26px 20px}
.mini-logo img{height:84px}
.langs button{width:52px;height:60px}
.langs button img{width:44px}
body{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.plate .w70{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 7.0))}.plank .w70,.go .w70{font-size:min(1em,25.6px)}.sign .w70{font-size:min(1em,calc(min(88vw, 440px) * .7 / 7.0))}
.plate .w75{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 7.5))}.plank .w75,.go .w75{font-size:min(1em,23.9px)}.sign .w75{font-size:min(1em,calc(min(88vw, 440px) * .7 / 7.5))}
.plate .w80{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 8.0))}.plank .w80,.go .w80{font-size:min(1em,22.4px)}.sign .w80{font-size:min(1em,calc(min(88vw, 440px) * .7 / 8.0))}
.plate .w85{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 8.5))}.plank .w85,.go .w85{font-size:min(1em,21.1px)}.sign .w85{font-size:min(1em,calc(min(88vw, 440px) * .7 / 8.5))}
.plate .w90{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 9.0))}.plank .w90,.go .w90{font-size:min(1em,19.9px)}.sign .w90{font-size:min(1em,calc(min(88vw, 440px) * .7 / 9.0))}
.plate .w125{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 12.5))}.plank .w125,.go .w125{font-size:min(1em,14.3px)}.sign .w125{font-size:min(1em,calc(min(88vw, 440px) * .7 / 12.5))}
.plate .w130{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 13.0))}.plank .w130,.go .w130{font-size:min(1em,13.8px)}.sign .w130{font-size:min(1em,calc(min(88vw, 440px) * .7 / 13.0))}
.plate .w135{font-size:min(1em,calc((min(100vw - 60px, 500px)) * .72 / 13.5))}.plank .w135,.go .w135{font-size:min(1em,13.3px)}.sign .w135{font-size:min(1em,calc(min(88vw, 440px) * .7 / 13.5))}
@media (min-width:600px){.plate .w70{font-size:min(1em,51.4px)}.plate .w75{font-size:min(1em,48.0px)}.plate .w80{font-size:min(1em,45.0px)}.plate .w85{font-size:min(1em,42.4px)}.plate .w90{font-size:min(1em,40.0px)}.plate .w125{font-size:min(1em,28.8px)}.plate .w130{font-size:min(1em,27.7px)}.plate .w135{font-size:min(1em,26.7px)}}