/* ============================================================
   ENTRUENCER One-Pager - Theme-Overrides (ASCII-only)
   Laedt nach styles.css + visuals.css.
   ============================================================ */

/* ---- TEAM: echtes <img> statt <image-slot>-Webcomponent ---- */
.team-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) contrast(1.04) brightness(1.03);
  transition:filter .5s ease;
}
.team-card:hover .team-photo img{filter:grayscale(0);}

/* ---- KONTAKT: Erfolgsmeldung sauber ein-/ausblenden ---- */
#ent-form-done[hidden]{display:none;}
.form-note.is-error{color:#ff6b6b;}

/* ---- reCAPTCHA: Badge (Logo) ausblenden + dezenter Pflichthinweis (Google-Vorgabe) ---- */
.grecaptcha-badge{visibility:hidden;}
.recaptcha-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:#A5A5A5;}
.recaptcha-note a{color:inherit;text-decoration:underline;}
.recaptcha-note a:hover{color:#ECECEC;}

/* ---- NAV-Logo: nie verzerren (8:1-Ratio, Flex-Shrink + max-width unterbinden) ---- */
.nav-logo{flex:none;max-width:none;width:auto;object-fit:contain;}

/* ---- Tool-Mocks: alle gleich hoch (Twynko-Chat ist der hoechste) ---- */
.mock{height:200px;}

/* ---- PRODUKT-Logos statt Initialen (eigene Form/Farbe, kein Verlaufs-Kasten) ---- */
.prod-logo{width:50px;height:50px;flex:none;object-fit:contain;display:block;}

/* ============================================================
   MOBILE-FIXES (im Original fehlten Breakpoints fuer Nav-CTA & Kontakt)
   ============================================================ */

/* Kurzes CTA-Label nur auf kleinen Screens zeigen */
.lbl-short{display:none;}

@media (max-width:1040px){
  /* HERO-Reihenfolge auf Mobil: Eyebrow + H1 zuerst, dann Sphaere, dann Rest.
     hero-copy aufloesen (display:contents), Kinder via order anordnen. */
  .hero{padding:40px 0 72px;}
  .hero-inner{display:flex;flex-direction:column;align-items:stretch;}
  .hero-copy{display:contents;}
  .hero .eyebrow{order:1;}
  .hero h1{order:2;}
  .hero-stage{order:3;margin:6px auto 18px;}
  .hero .lede{order:4;}
  .hero-cta{order:5;}
  .hero-meta{order:6;}
}

@media (max-width:900px){
  /* Kontakt: Formular + Karten untereinander statt nebeneinander */
  .contact-inner{grid-template-columns:1fr;gap:40px;}
}

@media (max-width:600px){
  /* H1 noch naeher an die Oberkante */
  .hero{padding:24px 0 60px;}
  /* Nav: CTA bleibt sichtbar, aber kompakt + kurzes Label, Logo etwas kleiner */
  .nav-inner{padding:14px 16px;gap:12px;}
  .nav-logo{height:22px;}
  .nav .btn{padding:9px 14px;font-size:13px;}
  .lbl-full{display:none;}
  .lbl-short{display:inline;}
  /* Formularfelder einspaltig, damit nichts quetscht */
  .field-row{grid-template-columns:1fr;}
}

/* ---- LEGAL-Seiten (Impressum/Datenschutz/AGB/Cookie) ---- */
.legal{padding-top:118px;}
.legal .wrap{max-width:820px;}
.legal h1{
  font-family:var(--head-font);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(30px,4.4vw,48px);line-height:1.05;margin:0 0 28px;
}
.legal h2,.legal h3,.legal h4{font-family:var(--head-font);color:var(--ink);line-height:1.2;}
.legal h2{font-size:24px;margin:36px 0 12px;}
.legal h3{font-size:19px;margin:28px 0 10px;}
.legal h4{font-size:16px;margin:22px 0 8px;}
.legal p,.legal li{color:var(--ink-2);font-size:16px;line-height:1.7;margin:0 0 14px;}
.legal ul,.legal ol{padding-left:22px;margin:0 0 16px;}
.legal a{color:var(--g2);text-decoration:underline;text-underline-offset:2px;}
.legal a:hover{color:var(--ink);}
.legal strong,.legal b{color:var(--ink);}
.legal table{width:100%;border-collapse:collapse;margin:0 0 18px;}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;text-align:left;color:var(--ink-2);font-size:15px;}

/* ---- COMPLIANZ-Cookie-Doc an Legal-Design angleichen ----
   Wrapper hat id="cmplz-document"; Complianz document.min.css targetet per ID
   (ohne !important, laedt vor diesem File) -> hier per ID gegenhalten.
   Cookie-Tabellen/Dropdowns bringen helle Backgrounds mit -> auf Dark-Panel ziehen. */
.legal #cmplz-document{color:var(--ink-2);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.7;max-width:none;}
.legal #cmplz-document h1,
.legal #cmplz-document h2,
.legal #cmplz-document h3,
.legal #cmplz-document h4,
.legal #cmplz-document h5,
.legal #cmplz-document h6{font-family:var(--head-font);color:var(--ink);line-height:1.2;letter-spacing:-.01em;border-bottom:0;}
.legal #cmplz-document h2{font-size:24px;margin:36px 0 12px;padding-bottom:0;}
.legal #cmplz-document h3{font-size:19px;margin:28px 0 10px;padding-bottom:0;}
.legal #cmplz-document h4{font-size:16px;margin:22px 0 8px;}
.legal #cmplz-document h5,
.legal #cmplz-document h6{font-size:15px;margin:18px 0 6px;}
.legal #cmplz-document p,
.legal #cmplz-document li,
.legal #cmplz-document td{color:var(--ink-2);font-size:16px;line-height:1.7;margin:0 0 14px;}
.legal #cmplz-document ul,
.legal #cmplz-document ol{padding-left:22px;margin:0 0 16px;}
.legal #cmplz-document a{color:var(--g2);text-decoration:underline;text-underline-offset:2px;}
.legal #cmplz-document a:hover{color:var(--ink);}
.legal #cmplz-document strong,
.legal #cmplz-document b{color:var(--ink);}
/* externes-Link-Icon (base64-PNG) raus - passt nicht ins Dark-Design */
.legal #cmplz-document a[target=_blank]::after{display:none;}
/* Cookie-Dropdowns + Cookie-Tabelle: helle Complianz-Backgrounds -> Dark-Panel */
.legal #cmplz-document .cmplz-dropdown{background-color:var(--panel-2)!important;border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 12px;}
.legal #cmplz-document .cmplz-dropdown summary{background-color:var(--panel)!important;color:var(--ink);cursor:pointer;}
.legal #cmplz-document .cmplz-dropdown summary h3{color:var(--ink);}
.legal #cmplz-document .cookies-per-purpose{border-color:var(--line)!important;background-color:var(--line)!important;}
.legal #cmplz-document .cookies-per-purpose div{background-color:var(--panel)!important;color:var(--ink-2);}
.legal #cmplz-document .cookies-per-purpose .name-header,
.legal #cmplz-document .cookies-per-purpose .retention-header,
.legal #cmplz-document .cookies-per-purpose .function-header{background-color:var(--panel-2)!important;color:var(--ink);}
.legal .cmplz-hidden{display:none !important;}
