/* Bausteine. Alles hier wird an mehr als einer Stelle gebraucht. */

/* ==================================================================
   Eyebrow — die kleine Zeile ueber einer Ueberschrift
   ================================================================== */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blau);
  margin:0 0 16px;
}
.eyebrow::after{
  content:''; display:block; width:34px; height:1px;
  background:var(--blau); margin-top:10px; opacity:.5;
}
.eyebrow-still{ color:var(--text3); }
.eyebrow-still::after{ background:var(--text3); }
.dunkel .eyebrow{ color:var(--blau2); }
.dunkel .eyebrow::after{ background:var(--blau2); }

/* ==================================================================
   Lauftext
   ================================================================== */
.lead{ font-size:17px; color:var(--text2); }
.sub{ font-size:16.5px; color:var(--text2); }
.dunkel .lead,.dunkel .sub{ color:var(--hell2); }

/* Textmarker in Blau. Faehrt beim Sichtbarwerden auf. */
mark.hl{
  background:none; color:inherit; padding:0 .12em;
  background-image:linear-gradient(var(--blau-weich),var(--blau-weich));
  background-repeat:no-repeat; background-size:0% 100%;
  transition:background-size 620ms cubic-bezier(.4,0,.2,1);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
mark.hl.on{ background-size:100% 100%; }
@media (prefers-reduced-motion:reduce){
  mark.hl{ background-size:100% 100%; transition:none; }
}

/* ==================================================================
   Knoepfe. Ruhig, ohne Effekt, mindestens 52px hoch.
   ================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px;
  background:var(--ink); color:#fff;
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--ink); border-radius:var(--radius);
  cursor:pointer; text-align:center;
  transition:background var(--tempo-kurz),border-color var(--tempo-kurz),color var(--tempo-kurz);
}
.btn:hover{ background:var(--blau); border-color:var(--blau); }
.btn:active{ background:var(--blau-tief); border-color:var(--blau-tief); }
.btn .i{ width:16px; height:16px; flex:none; }

.btn-primar{ background:var(--blau); border-color:var(--blau); }
.btn-primar:hover{ background:var(--ink); border-color:var(--ink); }

.btn-geist{ background:transparent; color:var(--ink); border-color:var(--linie); }
.btn-geist:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }
.dunkel .btn-geist{ color:#fff; border-color:var(--linie-n); }
.dunkel .btn-geist:hover{ border-color:#fff; }

.btn-hell{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-hell:hover{ background:var(--blau2); border-color:var(--blau2); color:var(--ink); }

.btn-breit{ width:100%; }

/* Pfeil, der beim Hover eine Spur weiterrutscht */
.pfeil{ display:inline-block; transition:transform var(--tempo-kurz); }
.btn:hover .pfeil,
.zeile:hover .pfeil,
.textlink:hover .pfeil{ transform:translateX(4px); }

.btn-note{ margin-top:13px; font-size:13.5px; color:var(--text3); }
.btn-note b{ font-weight:600; color:var(--text); }
.dunkel .btn-note{ color:var(--hell3); }
.dunkel .btn-note b{ color:#fff; }

/* ==================================================================
   Textlink mit wachsender Unterlinie
   ================================================================== */
.textlink{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--blau); font-weight:500; font-size:15px;
  position:relative; padding-bottom:2px;
}
.textlink::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--tempo-kurz);
}
.textlink:hover::after{ transform:scaleX(1); }
.dunkel .textlink{ color:var(--blau2); }

/* ==================================================================
   Rautenpunkt. Das Aufzaehlungszeichen des Hauses.
   ================================================================== */
.punkte{ display:grid; gap:11px; }
.punkte li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--text2); }
.punkte li::before{
  content:''; width:5px; height:5px; flex:none; margin-top:9px;
  background:var(--blau); transform:rotate(45deg);
}
.dunkel .punkte li{ color:var(--hell2); }
.dunkel .punkte li::before{ background:var(--blau2); }

/* ==================================================================
   Marken. Gelb heisst gratis, Blau heisst Member.
   Die Farben stammen aus den Titelbildern, nicht aus einer Palette.
   ================================================================== */
.tag{
  display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text3); white-space:nowrap;
}
.tag-blau{ color:var(--blau); }
.tag-gratis{
  color:var(--gelb);
  background:var(--gelb-weich);
  border:1px solid var(--gelb-linie);
  border-radius:var(--radius);
  padding:.22rem .5rem;
}
.tag-member{
  color:var(--blau);
  background:var(--blau-weich);
  border:1px solid var(--blau-linie);
  border-radius:var(--radius);
  padding:.22rem .5rem;
}
.dunkel .tag{ color:var(--hell3); }
.dunkel .tag-member{ color:var(--blau2); border-color:rgba(143,171,255,.45); background:rgba(143,171,255,.10); }
.dunkel .tag-gratis{ color:#F2CF4A; border-color:rgba(242,207,74,.45); background:rgba(242,207,74,.10); }

/* ==================================================================
   Bildrahmen. Faellt ein Bild aus, bleibt ein sauberer Platzhalter.
   ================================================================== */
.rahmen{
  margin:0; position:relative; overflow:hidden;
  border:1px solid var(--linie2);
  background:var(--bg2);
}
.rahmen img{
  width:100%; height:auto; display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.rahmen-zoom:hover img{ transform:scale(1.02); }
.rahmen figcaption{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text3);
  padding:8px 10px;
  border-top:1px solid var(--linie2);
  background:var(--bg);
}
.rahmen.fehlt{
  border:1px dashed var(--blau-linie);
  background:
    repeating-linear-gradient(135deg,rgba(27,73,214,.045) 0 10px,transparent 10px 20px),
    var(--bg2);
  min-height:180px;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
}
.rahmen.fehlt img{ display:none; }
.rahmen.fehlt::before{
  content:attr(data-platz);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; color:var(--blau);
  text-align:center; overflow-wrap:anywhere;
}
.dunkel .rahmen{ border-color:var(--linie-n2); background:rgba(255,255,255,.04); }
.dunkel .rahmen figcaption{ background:transparent; color:var(--hell3); border-top-color:var(--linie-n2); }
.dunkel .rahmen.fehlt{ border-color:rgba(143,171,255,.5); }
.dunkel .rahmen.fehlt::before{ color:var(--blau2); }

/* ==================================================================
   Anmeldeformular
   ================================================================== */
.signup{ max-width:30rem; }
.signup-feld{ display:flex; gap:8px; align-items:stretch; }

.signup input[type=email]{
  flex:1 1 auto; min-width:0;
  min-height:52px;
  padding:0 15px;
  background:#fff;
  border:1px solid var(--linie);
  border-radius:var(--radius);
  font-size:16px;
  color:var(--text);
  transition:border-color var(--tempo-kurz),box-shadow var(--tempo-kurz);
}
.signup input[type=email]::placeholder{ color:var(--text3); }
.signup input[type=email]:focus{
  border-color:var(--blau);
  box-shadow:0 0 0 3px var(--blau-weich);
  outline:none;
}
.dunkel .signup input[type=email]{
  background:rgba(255,255,255,.07);
  border-color:var(--linie-n);
  color:#fff;
}
.dunkel .signup input[type=email]::placeholder{ color:var(--hell3); }
.dunkel .signup input[type=email]:focus{
  border-color:var(--blau2);
  box-shadow:0 0 0 3px rgba(143,171,255,.18);
}

.signup button{ flex:0 0 auto; white-space:nowrap; }
.signup[data-status=laedt] button{ opacity:.6; pointer-events:none; }

.signup-hinweis{
  margin:13px 0 0;
  font-size:13.5px; line-height:1.55;
  color:var(--text3);
}
.dunkel .signup-hinweis{ color:var(--hell3); }

.signup-meldung{
  margin:13px 0 0;
  font-size:14.5px; line-height:1.55;
  display:none;
  padding-left:1.5rem; position:relative;
}
.signup-meldung::before{ position:absolute; left:0; top:0; font-weight:700; }
.signup[data-status=fertig] .signup-meldung,
.signup[data-status=fehler] .signup-meldung{ display:block; }
.signup[data-status=fertig] .signup-feld,
.signup[data-status=fertig] .signup-hinweis{ display:none; }
.signup[data-status=fertig] .signup-meldung{ color:var(--blau); }
.signup[data-status=fertig] .signup-meldung::before{ content:'\2713'; }
.signup[data-status=fehler] .signup-meldung{ color:#B4361B; }
.signup[data-status=fehler] .signup-meldung::before{ content:'!'; }
.dunkel .signup[data-status=fertig] .signup-meldung{ color:var(--blau2); }
.dunkel .signup[data-status=fehler] .signup-meldung{ color:#FF9E82; }

/* Honigtopf fuer Maschinen. Menschen sehen ihn nie. */
.honig{ position:absolute; left:-5000px; }

/* ==================================================================
   Research-Zeile. Titelbild links, damit man Gratis und Member
   auf einen Blick unterscheidet: Gelb ist frei, Blau gehoert Membern.
   ================================================================== */
.zeile{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  padding:18px 0;
  border-top:1px solid var(--linie2);
  transition:background var(--tempo-kurz);
}
.zeile:last-child{ border-bottom:1px solid var(--linie2); }

.zeile-bild{
  display:block; margin:0; overflow:hidden;
  border:1px solid var(--linie2);
  background:var(--bg2);
  aspect-ratio:16/9;
}
.zeile-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.zeile:hover .zeile-bild img{ transform:scale(1.03); }
.zeile-bild.fehlt{ min-height:0; }   /* der 16:9-Kasten gibt die Hoehe vor */

.zeile-inhalt{ display:block; min-width:0; }
.zeile-kopf{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:7px; }
.zeile-datum{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text3);
}
.zeile-titel{
  display:block;
  font-family:var(--sans); font-weight:600;
  font-size:19px; line-height:1.25; letter-spacing:-.018em;
  color:var(--ink); margin:0 0 5px;
  transition:color var(--tempo-kurz);
}
.zeile:hover .zeile-titel{ color:var(--blau); }
.zeile-unter{ display:block; font-size:15px; color:var(--text3); margin:0; }
.zeile-fuss{ display:flex; align-items:center; gap:12px; margin-top:9px; }

@media (min-width:640px){
  .zeile{ grid-template-columns:168px 1fr; gap:20px; align-items:start; padding:22px 0; }
  .zeile-titel{ font-size:21px; }
}
@media (min-width:1024px){
  .zeile{ grid-template-columns:210px 1fr; gap:26px; }
  .zeile-titel{ font-size:23px; }
}

/* ==================================================================
   Tor vor den kostenlosen Ausgaben.
   Kein Werbefenster. Es kommt erst, wenn jemand von sich aus eine
   Ausgabe anklickt, und es fuehrt genau dorthin weiter.
   ================================================================== */
.tor{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.tor[hidden]{ display:none; }
.tor-hinter{
  position:absolute; inset:0;
  background:rgba(21,21,26,.55);
  backdrop-filter:blur(3px);
  animation:tor-ein .18s ease-out both;
}
.tor-karte{
  position:relative;
  width:100%; max-width:32rem;
  max-height:calc(100dvh - 40px); overflow:auto;
  background:var(--bg);
  border:1px solid var(--linie2);
  border-top:2px solid var(--blau);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(21,21,26,.22);
  padding:clamp(1.4rem,4vw,2.1rem);
  animation:tor-hoch .22s cubic-bezier(.22,.61,.36,1) both;
}
.tor-karte h2{ font-size:clamp(23px,4vw,29px); margin:0 0 10px; }
.tor-text{ margin:0 0 20px; font-size:15.5px; color:var(--text2); }
.tor-x{
  position:absolute; top:8px; right:8px;
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:var(--text3);
  transition:color var(--tempo-kurz);
}
.tor-x:hover{ color:var(--ink); }
/* Der Hintergrund darf nicht mitscrollen, solange das Tor offen ist. */
body.starr{ overflow:hidden; }

@keyframes tor-ein{ from{ opacity:0 } to{ opacity:1 } }
@keyframes tor-hoch{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .tor-hinter,.tor-karte{ animation:none; }
}