/* zoeliakie-treff.de — DA « Der Auszahlungsbeleg » · papier, encre, vert Gutschrift · v20260904 */
@font-face{font-family:'Literata';font-style:normal;font-weight:600 700;font-display:swap;src:url('/fonts/literata-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Literata';font-style:normal;font-weight:600 700;font-display:swap;src:url('/fonts/literata-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/public-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/public-sans-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#F7F5F0;--paper-2:#EFEBE3;--white:#FFFDFA;--ink:#1B1F2A;--ink-2:#4A5163;--ink-3:#6B7280;--line:#DDD7CB;
  --green:#12805C;--green-ink:#0B5A41;--green-soft:#E3F2EA;
  --amber:#D98E04;--amber-soft:#FBF0D6;--red:#B4322A;--red-soft:#F7E3E1;
  --max:1080px;--radius:10px;--serif:'Literata',Georgia,'Times New Roman',serif;--sans:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --shadow:0 1px 2px rgba(27,31,42,.06),0 8px 24px -12px rgba(27,31,42,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
strong,b{font-weight:600}

/* ---------- header ---------- */
.site-head{background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 1rem var(--sans);letter-spacing:.01em}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:6px 10px;border-radius:6px;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink-2)}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
@media (max-width:640px){.nav{display:none}}

/* ---------- typographie ---------- */
.article{padding:28px 20px 56px}
h1{font:700 clamp(1.85rem,3.6vw,2.5rem)/1.15 var(--serif);letter-spacing:-.01em;margin:8px 0 18px;max-width:22ch}
h2{font:700 clamp(1.4rem,2.6vw,1.75rem)/1.25 var(--serif);margin:56px 0 14px;padding-top:14px;border-top:3px solid var(--ink);max-width:30ch}
h3{font:600 1.22rem/1.3 var(--serif);margin:32px 0 10px}
h4{font:600 .8rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px}
p{margin:0 0 14px;max-width:72ch}
ul,ol{padding-left:1.25em;margin:0 0 16px;max-width:72ch}
li{margin:0 0 6px}
section>p:first-of-type,.slot>p:first-child{font-size:1.09rem}
.opus-slot{background:repeating-linear-gradient(-45deg,var(--amber-soft) 0 8px,#fff6df 8px 16px);border:1px dashed var(--amber);border-radius:6px;padding:10px 14px;color:#7a5200;font-size:.92rem}

/* ---------- hero Zeitstrahl + byline ---------- */
.hero-zs,.zeitstrahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-2)}
.hero-zs{margin:0 0 18px;padding:12px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.hero-zs span,.zs-step{display:inline-flex;flex-direction:column;line-height:1.2}
.hero-zs b,.zs-step b{color:var(--ink);font-weight:600}
.hero-zs .end b,.zs-end b{color:var(--green-ink)}
.hero-zs i,.zs-line{flex:1 1 24px;height:2px;min-width:24px;background:linear-gradient(90deg,var(--line),var(--green));border-radius:2px}
.byline{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-2)}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line)}
.byline img+img{margin-left:-14px}
.byline div{display:flex;flex-direction:column;gap:2px;margin-left:4px}
.byline a{color:var(--ink);text-decoration:none}
.byline-date{color:var(--ink-3)}

/* ---------- toplist widget (prise.info) ---------- */
.toplist{margin:0 0 10px;overflow:hidden}
[data-toplist-label] a,[data-toplist-label] .cta a,.casino-toplist-container a,.casino-toplist-container .cta a{color:#fff!important;text-decoration:none!important;border-bottom:none!important}
.casino-toplist-container{max-width:100%}
.casino-toplist-container table{width:100%;max-width:100%}
/* plafond visuel : 5 lignes, le reste s'ouvre au clic */
.toplist:not(.open) .casino-toplist-container tbody tr:nth-child(n+6){display:none}
.toplist-more{display:block;margin:0 auto 22px;background:transparent;border:1px solid var(--ink);color:var(--ink);font:600 .9rem var(--sans);padding:9px 16px;border-radius:8px;cursor:pointer}
.toplist-more:hover{background:var(--paper-2)}
.toplist.open+.toplist-more{display:none}
.rating,.stars{white-space:nowrap}
.tbl thead th:first-child{background:var(--ink)}

/* ---------- TOC ---------- */
.toc{margin:0 0 8px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px}
.toc summary{cursor:pointer;font-weight:600;list-style:none}
.toc summary::before{content:'≡ ';color:var(--green)}
.toc ol{margin:10px 0 4px;columns:2;column-gap:28px;font-size:.92rem}
.toc li{break-inside:avoid;margin:0 0 5px}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--green-ink);text-decoration:underline}
@media (max-width:640px){.toc ol{columns:1}}

/* ---------- liste « auf einen Blick » ---------- */
.quick{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px;max-width:none}
.quick li{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.98rem}
.quick li::before{counter-increment:q;content:counter(q);font:600 .8rem var(--sans);color:var(--ink-3);min-width:1.4em}
.quick{counter-reset:q}
.quick img{width:24px;height:12px;object-fit:contain;flex:none}
.quick li>span{flex:1 1 0;min-width:0}
.quick li{align-items:flex-start}
.quick li::before,.quick img{margin-top:.35em}
.quick a{font-weight:600;color:var(--ink);text-decoration:none}
.quick a:hover{color:var(--green-ink);text-decoration:underline}
.quick strong{color:var(--green-ink)}

/* ---------- visuel de section ---------- */
.sec-fig{margin:18px 0 22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.sec-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---------- tableaux ---------- */
.table-wrap{overflow-x:auto;margin:14px 0 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:640px}
.tbl caption{caption-side:bottom;text-align:left;font-size:.8rem;color:var(--ink-3);padding:8px 12px}
.tbl th{background:var(--ink);color:var(--paper);font-weight:600;text-align:left;padding:10px 12px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:nth-child(1) td{background:var(--green-soft)}
.tbl tbody tr:hover td{background:var(--paper-2)}
.tbl tbody tr:nth-child(1):hover td{background:#d6ecdf}
.tbl td:first-child,.tbl th:first-child{position:sticky;left:0;background:inherit;z-index:1}
.tbl tbody td:first-child{background:var(--white);font-weight:600}
.tbl tbody tr:nth-child(1) td:first-child{background:var(--green-soft)}
.tbl td:first-child a{color:var(--ink);text-decoration:none}
.tbl td:first-child a:hover{color:var(--green-ink);text-decoration:underline}
.tbl-t1 td:last-child,.tbl-t1 th:last-child{text-align:right}

/* ---------- boutons ---------- */
.btn{display:inline-block;background:var(--green);color:#fff;font:600 .95rem/1.2 var(--sans);padding:11px 18px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{background:var(--green-ink);color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(18,128,92,.6)}
.btn-sm{padding:7px 12px;font-size:.82rem;white-space:nowrap;box-shadow:none}
.btn-cta{font-size:1.02rem;padding:14px 22px;width:100%;text-align:center}
.cta-wrap{margin:18px 0 0;display:flex;flex-direction:column;gap:6px;align-items:center;max-width:none}
.micro{font-size:.8rem;color:var(--ink-3)}

/* ---------- fiches casino ---------- */
.casino{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 22px;margin:22px 0;box-shadow:var(--shadow)}
.casino:target{outline:3px solid var(--amber);outline-offset:3px}
.casino-num{position:absolute;left:-58px;top:14px;font:italic 700 2.6rem/1 var(--serif);color:var(--line);display:none}
@media (min-width:1180px){.casino-num{display:block}}
.casino-head{display:flex;align-items:center;gap:16px;margin:0 0 12px}
.casino-head img{width:128px;height:64px;object-fit:contain;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px;flex:none}
.casino-head h3{margin:0 0 6px;font-size:1.28rem}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-2)}
.stars{position:relative;display:inline-block;font-size:1.05rem;line-height:1;letter-spacing:1px;color:var(--line)}
.stars-fill{position:absolute;left:0;top:0;width:var(--score);overflow:hidden;white-space:nowrap;color:var(--amber)}
.rating-val{font-weight:600;color:var(--ink)}
.zeitstrahl{margin:0 0 14px;padding:10px 12px;background:var(--paper);border-radius:8px;border:1px solid var(--line)}
.shot{display:block;margin:0 0 14px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.shot img{aspect-ratio:1280/800;object-fit:cover;transition:transform .3s}
.shot:hover img{transform:scale(1.015)}
.meta-band{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--ink-2);margin:0 0 14px;padding:8px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);max-width:none}
.meta-band b{color:var(--ink)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 0}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{padding-left:1.4em;position:relative;font-size:.95rem;margin:0 0 5px}
.pc>div:first-child li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}
.pc>div:last-child li::before{content:'–';position:absolute;left:0;color:var(--red);font-weight:700}
@media (max-width:640px){.pc{grid-template-columns:1fr}.casino{padding:16px}.casino-head{flex-direction:column;align-items:flex-start}}

/* ---------- HowTo, FAQ ---------- */
.howto{counter-reset:h;list-style:none;padding:0;max-width:none}
.howto li{counter-increment:h;position:relative;padding:14px 16px 14px 60px;background:var(--white);border:1px solid var(--line);border-radius:8px;margin:0 0 10px}
.howto li::before{content:counter(h);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 .95rem/32px var(--sans);text-align:center}
.howto strong{display:block;margin:0 0 6px;font-family:var(--serif);font-size:1.08rem}
.faq-item{padding:4px 0 6px;border-bottom:1px solid var(--line)}
.faq-item h3{margin:18px 0 8px;font-size:1.12rem}
.faq-item h3::before{content:'?';display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);font:600 .85rem/22px var(--sans);text-align:center;margin-right:10px;vertical-align:2px}

/* ---------- auteurs ---------- */
.authors h2{border-top-color:var(--line)}
.author{display:flex;gap:16px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 0 12px}
.author img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.author-name{font:600 1.1rem var(--serif);margin:0 0 2px}
.author-role{font-size:.9rem;color:var(--ink-2);margin:0 0 8px}
.badge{display:inline-block;font:600 .7rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--green-soft);color:var(--green-ink);padding:4px 7px;border-radius:4px;vertical-align:middle;margin-left:6px}
.badge::before{content:'✓ '}

/* ---------- sticky CTA mobile ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(27,31,42,.96);backdrop-filter:blur(6px);z-index:50}
.sticky-cta .btn{flex:1;padding:12px 14px;font-size:.92rem;box-shadow:none}
.sticky-cta button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:1.2rem;cursor:pointer}
@media (max-width:760px){.sticky-cta{display:flex}body{padding-bottom:70px}}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#C9CDD6;padding:36px 0 28px;margin-top:48px;border-top:4px solid var(--green)}
.site-foot p{max-width:none;font-size:.9rem}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff}
.foot-brand img{filter:invert(1) brightness(1.4)}
.foot-legal{color:#AEB4C0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0}
.foot-links a{color:#fff;text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-links span{color:#8A91A0}

/* ---------- pages légales ---------- */
.legal h1{font-size:2rem}
.legal h2{font-size:1.25rem;margin-top:28px;border-top:0;padding-top:0}

/* ---------- correctifs audit du 04/09/2026 ---------- */
/* contraste : .byline-date mesurée à 4,43:1, sous le seuil AA */
:root{--ink-3:#5A616F}

/* cibles tactiles sous 44 px (audit technique M-5 / CRO H5) */
.btn-sm{padding:12px 16px}
.toplist-more{padding:12px 18px}
.sticky-cta button{width:44px;height:44px}

/* le widget tiers n'a pas de dimensions : il causait 0,187 de CLS en desktop */
#toplist{min-height:320px}
@media (max-width:760px){
  /* 5 cartes de 500 px faisaient 2 656 px avant l'article : on plafonne à 3 */
  .toplist:not(.open) .casino-toplist-container tbody tr:nth-child(n+4){display:none}
  #toplist{min-height:0}
}

/* divulgation d'affiliation au point de contact (§5a Abs. 4 UWG) */
.aff-note{font-size:.78rem;line-height:1.45;color:var(--ink-3);margin:0 0 12px;max-width:70ch}

/* notre top 3, en remplacement du widget partenaire en tête */
.top3{margin:0 0 22px}
.t3-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:none;counter-reset:t3}
.t3-item{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--green);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.t3-item:first-child{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-soft),var(--white) 55%)}
.t3-rank{font:700 1.1rem/1 var(--serif);color:var(--ink-3);min-width:1.2em;flex:none}
.t3-item img{width:96px;height:48px;object-fit:contain;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:4px;flex:none}
.t3-body{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:0}
.t3-name{font:600 1.05rem var(--serif);color:var(--ink);text-decoration:none}
.t3-name:hover{color:var(--green-ink);text-decoration:underline}
.t3-fact{font-size:.86rem;color:var(--green-ink);font-weight:600}
.t3-bonus{font-size:.86rem;color:var(--ink-2)}
.btn-t3{flex:none;white-space:nowrap}
@media (max-width:640px){
  .t3-item{flex-wrap:wrap}
  .t3-body{flex:1 1 100%;order:3}
  .btn-t3{flex:1 1 100%;order:4;text-align:center}
}

/* logos de fiche cliquables */
.logo-link{display:block;flex:none;border-radius:8px}
.logo-link:hover img{border-color:var(--green)}

/* bloc de clôture : 59 % de la page desktop n'avait aucun lien après la FAQ */
#abschluss .closing{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px;max-width:none}
#abschluss .closing li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.cl-lab{font-weight:600;color:var(--ink)}
@media (max-width:560px){#abschluss .closing li{flex-direction:column;align-items:stretch}
  #abschluss .closing .btn-sm{text-align:center}}

/* classement partenaire, descendu sous nos fiches */
#partnerliste h2{border-top-color:var(--line)}

/* contraste des numéros décoratifs de fiche (1,31:1 mesuré) */
.casino-num{color:#807A6E}