/* Redesign of the partner pages (VPP-11053).
 *
 * Taken over from the approved draft (vp-entwurf.zip, stil.css) with the demo
 * scaffolding removed: no #entwurfsleiste, no settings panel, and the sticky
 * header therefore starts at top:0 instead of top:41px.
 *
 * Tokens are the ones teleson.de uses, so both sites read as one brand.
 * Fonts are self-hosted -- see fonts.css. Nothing here loads from an external
 * host; the pages must keep working after the legacy system is switched off.
 */
:root{
  --gruen:#81BE21; --gruen-dunkel:#6da31a; --gruen-hell:#f2f8e8;
  --anthrazit:#262525; --grau-dunkel:#54595F; --grau:#7A7A7A; --grau-hell:#EFEFEF;
  --weiss:#fff; --flaeche:#F7F8F5;
  --radius:10px; --schatten:0 2px 14px rgba(0,0,0,.07); --schatten-gross:0 10px 40px rgba(0,0,0,.10);
  --max:1180px;
  --font:"PT Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box}
/* Deliberately NOT scroll-behavior:smooth -- it would re-animate every single step
   of our own scroll animation, so both fight each other and the result crawls.
   Scrolling is driven by redesign.js (native, or custom when reduced motion is on). */
html{scroll-behavior:auto}
body{margin:0;font-family:var(--font);color:var(--grau-dunkel);background:var(--weiss);line-height:1.65;-webkit-font-smoothing:antialiased}
section{scroll-margin-top:124px}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translate3d(0,16px,0);will-change:opacity,transform;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
.reveal.da{opacity:1;transform:translate3d(0,0,0)}
#fortschritt{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gruen),#a8db56);z-index:600;transition:width .1s linear}
#hoch{position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:50%;border:0;background:var(--gruen);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:290;
  box-shadow:0 6px 20px rgba(129,190,33,.4);opacity:0;pointer-events:none;
  transition:opacity .55s ease,background .4s ease,box-shadow .4s ease}
#hoch.da{opacity:1;pointer-events:auto}
#hoch:hover{background:var(--gruen-dunkel);box-shadow:0 10px 30px rgba(129,190,33,.55)}
/* Reduced motion: drop the MOVEMENT only (slide-in, pulse ring). Soft colour,
   shadow and zoom transitions stay -- they do not trigger motion sickness.
   A blanket transition-duration:.01ms would turn every effect into a hard cut. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}
h1,h2,h3,h4{color:var(--anthrazit);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:700;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--gruen-dunkel)}
.sprunglink{position:fixed;left:16px;top:10px;z-index:700;padding:10px 16px;background:var(--anthrazit);color:#fff;border-radius:4px;text-decoration:none;transform:translateY(-150%)}
.sprunglink:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--anthrazit);outline-offset:3px}
.btn:focus-visible,#hoch:focus-visible{outline-color:var(--anthrazit)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.gruen{color:var(--gruen)}
.mitte{text-align:center}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
header.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--grau-hell);transition:box-shadow .3s,background .3s}
header.kopf.gescrollt{box-shadow:0 4px 24px rgba(0,0,0,.08);background:rgba(255,255,255,.99)}
.kopf .wrap{display:flex;align-items:center;gap:26px;height:82px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:42px;width:auto;display:block;opacity:.92;transition:opacity .5s ease}
.logo:hover img{opacity:1}
nav.haupt{display:flex;gap:24px;margin-left:auto}
nav.haupt a{position:relative;color:var(--grau-dunkel);text-decoration:none;font-size:.95rem;padding:6px 0;transition:color .2s}
nav.haupt a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gruen);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
nav.haupt a:hover,nav.haupt a.an{color:var(--gruen)}
nav.haupt a:hover::after,nav.haupt a.an::after{transform:scaleX(1);transform-origin:left}
.menuknopf{display:none;width:44px;height:44px;padding:10px;border:0;background:transparent;border-radius:4px;place-content:center;gap:5px;cursor:pointer}
.menuknopf span[aria-hidden]{display:block;width:24px;height:2px;background:var(--anthrazit);transition:transform .2s ease,opacity .2s ease}
.menuknopf[aria-expanded="true"] span[aria-hidden]:nth-of-type(1){transform:translateY(7px) rotate(45deg)}
.menuknopf[aria-expanded="true"] span[aria-hidden]:nth-of-type(2){opacity:0}
.menuknopf[aria-expanded="true"] span[aria-hidden]:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)}
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--gruen);color:#fff;border:0;padding:13px 26px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;overflow:hidden;
  transition:background .4s ease,box-shadow .4s ease}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.22) 50%,transparent 68%);transform:translateX(-120%);transition:transform .9s ease}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{background:var(--gruen-dunkel);color:#fff;box-shadow:0 8px 26px rgba(129,190,33,.32)}
.btn:disabled{opacity:.65;cursor:wait}
.btn.hell{background:#fff;color:var(--grau-dunkel);border:1px solid #d7d7d7}
.btn.hell:hover{background:var(--flaeche);color:var(--anthrazit);box-shadow:0 8px 26px rgba(0,0,0,.09)}
.btn.klein{padding:9px 18px;font-size:.88rem}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--flaeche) 0%,#fff 62%);padding:70px 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-90px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(129,190,33,.12),transparent 68%);
  transform:translate3d(0,var(--hero-parallax,0px),0)}
.hero .raster{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero.schmal .raster{grid-template-columns:1fr;max-width:760px}
.kicker{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-dunkel);background:var(--gruen-hell);padding:6px 14px;border-radius:99px;margin-bottom:20px;font-weight:700}
.hero p.lead{font-size:1.14rem;color:var(--grau);max-width:34em}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- VP card ---------- */
/* Hover never moves the element itself -- the pointer would slide out of it and the
   effect would flicker. Only content inside a fixed frame is allowed to move. */
.vpkarte{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten-gross);overflow:hidden;
  transition:box-shadow .5s ease}
.vpkarte:hover{box-shadow:0 20px 54px rgba(0,0,0,.15)}
/* Zoom frame: the box stays put, the image inside moves. The image starts slightly
   scaled up so that scaling never exposes an empty edge. */
.vpkarte .bildbox{position:relative;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.vpkarte .bildbox::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.18),transparent 45%);opacity:0;transition:opacity 1s ease}
.vpkarte:hover .bildbox::after{opacity:1}
.vpkarte .bild{aspect-ratio:1/1;width:100%;object-fit:cover;display:block;background:var(--grau-hell);
  transform-origin:center 40%;backface-visibility:hidden;
  transform:scale(1.02) translateZ(0);
  transition:transform 1.6s cubic-bezier(.16,.68,.32,1)}
.vpkarte:hover .bild{transform:scale(1.09) translateZ(0)}
.vpkarte .inhalt{padding:24px}
.vpkarte .rolle{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gruen-dunkel);font-weight:700}
.vpkarte h2,.vpkarte h3{margin:6px 0 4px;font-size:1.35rem}
.vpkarte .firma{font-size:.95rem;color:var(--grau);margin-bottom:14px}
.vpkarte .leer{font-size:.88rem;color:var(--grau);font-style:italic;padding:10px 0}
.kontaktzeile{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--grau-hell);font-size:.94rem;color:var(--grau-dunkel);transition:color .35s ease}
.kontaktzeile .ic{width:30px;height:30px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen-dunkel);display:grid;place-items:center;flex-shrink:0;transition:background .45s ease,color .45s ease}
.kontaktzeile:hover .ic{background:#e2f1c6}
.kontaktzeile a{color:var(--grau-dunkel);text-decoration:none;word-break:break-word}
.kontaktzeile a:hover{color:var(--gruen-dunkel)}
.vpkarte .karte-btn{width:100%;justify-content:center;margin-top:16px}

/* ---------- sections ---------- */
section{padding:74px 0}
section.flaeche{background:var(--flaeche)}
.titel{max-width:46em;margin:0 auto 44px;text-align:center}
.titel p{color:var(--grau)}
.titel h2{position:relative;display:inline-block}
.titel h2::after{content:"";position:absolute;left:50%;bottom:-12px;height:3px;width:56px;
  background:var(--gruen);transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .8s cubic-bezier(.22,.61,.36,1) .2s}
.titel.da h2::after{transform:translateX(-50%) scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .titel h2::after{transition:none;transform:translateX(-50%) scaleX(1)}
}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kacheln.zwei{grid-template-columns:repeat(2,1fr)}
.kacheln.eins{grid-template-columns:1fr}
.kachel{position:relative;background:#fff;border:1px solid var(--grau-hell);border-radius:var(--radius);padding:30px;overflow:hidden;
  transition:box-shadow .5s ease,border-color .5s ease}
.kachel::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.kachel:hover::before{transform:scaleX(1)}
.kachel:hover{box-shadow:0 14px 40px rgba(0,0,0,.09);border-color:#dfe9cd}
.kachel .ic{width:50px;height:50px;border-radius:12px;background:var(--gruen-hell);color:var(--gruen-dunkel);display:grid;place-items:center;margin-bottom:16px;
  transition:background .5s ease,color .5s ease}
.kachel:hover .ic{background:#dcedbe}
.kachel p{font-size:.95rem;color:var(--grau);margin:0}
.mitte-abstand{margin-top:40px}
.pv-untertitel{margin-bottom:26px}
.beratungstext{max-width:52em;margin:0 auto 24px}
.absatz-cta{margin-top:12px}
.enger{max-width:56em;margin:0 auto;text-align:center}
.liste{list-style:none;padding:0;margin:0}
.liste li{position:relative;padding-left:32px;margin-bottom:12px;color:var(--grau-dunkel);transition:color .4s ease}
.liste li:hover{color:var(--anthrazit)}
.liste li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--gruen-hell);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236da31a' stroke-width='3'><path d='M5 13l4 4L19 7'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.liste.eng li{margin-bottom:7px;font-size:.95rem}
.app-knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.app-knoepfe img{height:44px;width:auto;display:block}

/* video and embedded iframe -- both stay blocked until the visitor consents */
.video{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--anthrazit);aspect-ratio:16/9;
  box-shadow:var(--schatten-gross);transition:box-shadow .6s ease}
.video:hover{box-shadow:0 22px 58px rgba(0,0,0,.26)}
.video .player{width:100%;height:100%;display:block;object-fit:cover;background:var(--anthrazit)}

.rahmen-iframe{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;
  border:1px solid var(--grau-hell);min-height:640px;box-shadow:var(--schatten)}
.rahmen-iframe .reg-iframe{width:100%;height:820px;border:0;display:block}

/* overlay shown while the video is blocked -- the registration iframe loads
   right away and has none */
.medium-sperre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:28px;background:linear-gradient(160deg,#2b2b2b,#1b1b1b);color:#cfcfcf;
  transition:opacity .5s ease,visibility .5s ease}
.medium-sperre svg{color:var(--gruen)}
.medium-sperre strong{color:#fff;font-size:1.05rem}
.medium-sperre p{font-size:.87rem;margin:0;max-width:34em}
.medium-sperre .btn{margin-top:6px}
.frei .medium-sperre{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- rating portals (VPP-11053) ---------- */
/* No shape of its own: the score rides in the title block, the portals are the
   page's usual `.kachel` grid. An own card here read as a widget dropped on the
   page instead of a section of it. */

/* Score line under the section intro. Framed like a tile, at pill scale, so it
   reads as a credential on the heading -- not as a second headline. */
.wertungszeile{display:inline-flex;align-items:center;gap:12px;margin:22px 0 0;
  padding:9px 20px;background:#fff;border:1px solid var(--grau-hell);border-radius:99px;
  box-shadow:var(--schatten);line-height:1}
.wertungszeile .zahl{font-size:1.3rem;font-weight:700;color:var(--anthrazit);letter-spacing:-.01em}
.wertungszeile .anzahl{font-size:.9rem;color:var(--grau);padding-left:12px;border-left:1px solid var(--grau-hell)}
/* Narrow screens: the count moves under the stars. The divider would otherwise
   be a stray vertical line, and a long label ("Durchschnitt aus 3 Portalen")
   does not fit beside them. */
@media(max-width:430px){
  .wertungszeile{flex-wrap:wrap;justify-content:center;gap:6px 10px;border-radius:var(--radius);padding:12px 18px}
  .wertungszeile .anzahl{flex-basis:100%;padding-left:0;border-left:0;text-align:center}
}

/* Star row: grey row below, green row clipped to --f on top. A 4.3 stays a 4.3
   instead of being rounded up to a full star. */
.sterne{position:relative;display:inline-block;width:max-content;line-height:0}
.sterne .reihe{display:flex;gap:3px}
/* No shrinking: the green row is CLIPPED to --f, and a flex row would instead
   squeeze all five stars into that width -- 84% would then look like a full five. */
.sterne .reihe svg{flex:0 0 auto}
.sterne .leer{fill:#e0e0e0}
.sterne .voll{position:absolute;left:0;top:0;width:var(--f,0%);overflow:hidden;fill:var(--gruen)}

/* A tile keeps the width it has in the three-column case, whatever the portal
   count -- stretched half-empty tiles at one or two portals looked like a
   layout accident rather than a short list. */
.portale.eins{max-width:360px}
.portale.zwei{max-width:746px}
.portale.eins,.portale.zwei{margin-left:auto;margin-right:auto}

/* Portal tile: a `.kachel` that is entirely a link, so the whole card is the
   target and the shared hover (green top bar) fires on the whole card.
   Centred, unlike the tiles further up the page: those carry a paragraph that
   fills the width, here it is a name and three words -- left-aligned they sit
   in the corner of a half-empty card. */
.kachel.portal{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 26px;text-decoration:none;color:inherit}
.kachel.portal h3{margin:0 0 6px}
.kachel.portal p{margin:0 0 14px}
/* Score inside the tile, on the same baseline for every portal so the tiles stay
   comparable -- including the ones that cannot show one. */
.kachel.portal .portalwertung{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-size:.9rem;line-height:1.1}
.kachel.portal .portalwertung .zahl{font-weight:700;color:var(--anthrazit)}
.kachel.portal .portalwertung .anzahl{color:var(--grau)}
/* Pushed to the bottom edge so the action lines up across tiles of unequal text. */
.kachel.portal .aktion{display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font-weight:700;font-size:.95rem;color:var(--gruen-dunkel)}
.kachel.portal .aktion svg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.kachel.portal:hover .aktion svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){
  .kachel.portal .aktion svg{transition:none}
  .kachel.portal:hover .aktion svg{transform:none}
}

/* ---------- form ---------- */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feld{display:flex;flex-direction:column;gap:6px}
.feld.voll{grid-column:1/-1}
.feld.reihe{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
label{font-size:.85rem;font-weight:700;color:var(--grau-dunkel)}
label.zustimmung{font-weight:400;display:flex;gap:10px;align-items:flex-start}
label.zustimmung input{width:auto;margin-top:5px}
input,textarea,select{font:inherit;padding:12px 14px;border:1px solid #d7d7d7;border-radius:4px;background:#fff;color:var(--anthrazit)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gruen);outline-offset:1px;border-color:var(--gruen)}
.hinweis-klein{font-size:.8rem;color:var(--grau)}
.feldfehler{font-size:.82rem;color:#a12525;font-weight:700}
/* Honeypot: has to be submittable, so it cannot be display:none in a way that
   browsers skip -- kept out of sight and out of the tab order instead. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:var(--radius);padding:18px 22px;margin:0 auto 28px;max-width:46em}
.meldung h3{margin:0 0 6px}
.meldung p{margin:0;font-size:.95rem}
.meldung.gut{background:var(--gruen-hell);border:1px solid #cfe0ae}
.meldung.schlecht{background:#fdf2f2;border:1px solid #f1c9c9}
.meldung.schlecht h3{color:#a12525}

/* ---------- footer ---------- */
footer{background:var(--anthrazit);color:#b9b9b9;padding:54px 0 24px;font-size:.92rem}
footer h2{color:#fff;font-size:.95rem;margin-bottom:14px}
footer a{color:#b9b9b9;text-decoration:none}
footer a:hover{color:var(--gruen)}
footer .knopf-link{background:none;border:0;padding:0;font:inherit;color:#b9b9b9;cursor:pointer;text-align:left}
footer .knopf-link:hover{color:var(--gruen)}
.fussraster{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid #3a3a3a}
.fussliste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.fussunten{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;font-size:.85rem;color:#8a8a8a}
.fuss-adresse{margin:0}
.fuss-hinweis{margin-top:14px}

/* ---------- cookie banner ---------- */
#cookie{position:fixed;left:24px;bottom:24px;width:min(420px,calc(100vw - 48px));background:#fff;border-radius:var(--radius);box-shadow:0 12px 50px rgba(0,0,0,.26);padding:26px;z-index:300}
#cookie[hidden]{display:none}
#cookie h2{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:.95rem}
#cookie p{font-size:.87rem;color:var(--grau);margin-bottom:8px}
#cookie .knoepfe{display:flex;flex-direction:column;gap:9px;margin-top:16px}
#cookie .schliessen{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;font-size:1.6rem;color:#bbb;cursor:pointer;line-height:1}
#cookie .consent-btn{justify-content:center}

/* ---------- standalone pages (404, 502, AGB) ---------- */
.schlicht{min-height:60vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.schlicht .wrap{max-width:44em}

@media(max-width:900px){
  .hero .raster,.kacheln,.kacheln.zwei,.formular,.fussraster,.zweispalt{grid-template-columns:1fr}
  .kopf .wrap{position:relative;gap:14px}
  .menuknopf{display:grid;margin-left:auto;flex-shrink:0}
  nav.haupt{display:none;position:absolute;left:24px;right:24px;top:calc(100% - 1px);margin:0;padding:12px;background:#fff;border:1px solid var(--grau-hell);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--schatten-gross);flex-direction:column;gap:2px}
  nav.haupt.offen{display:flex}
  nav.haupt a{padding:11px 10px}
  nav.haupt a::after{display:none}
  .hero{padding:40px 0 52px}
  section{padding:50px 0}
}
@media(max-width:600px){
  #cookie{left:0;bottom:0;width:100%;max-height:75dvh;overflow:auto;border-radius:var(--radius) var(--radius) 0 0;padding:22px 20px}
  #cookie .knoepfe{position:sticky;bottom:-22px;background:#fff;padding:10px 0 22px}
}
@media(max-width:420px){
  .wrap{padding-left:16px;padding-right:16px}
  .kopf .wrap{height:70px;gap:8px}
  .logo img{width:160px;height:auto}
  .kopf-cta{display:none}
  nav.haupt{left:16px;right:16px}
}