/* agentur mit Kopf - nur das, was zur Hauptseite dazukommt.
   assets/styles.css und assets/main.js bleiben bewusst unveränderte Kopien aus
   dmk-website (beide byteidentisch), damit ein späterer Abgleich ein reines
   Kopieren bleibt. Alles Eigene steht hier.

   Hinweis: .dmk-kopf und der Reveal-Failsafe stehen seit dem 19.08.2026 in
   styles.css selbst - vorher fehlten sie dort und wurden hier nachgebaut. */

/* ---------- Hero ----------
   Die Klasse .hero bringt aus styles.css den Verlauf und die Einblend-Staffelung
   mit. Die Maße dafür stehen dort aber nur unter ".stack .panel.hero", also nur
   für das Panel-Deck der Startseite. Diese Landingpage ist eine normale Seite,
   deshalb stehen sie hier.

   Alle Werte am 19.08.2026 an digital-mit-kopf.de gemessen (Viewport 1424 px):
   Hero 545 px hoch = calc(80vh - 72px), .hero-top OHNE max-width (die H1 läuft
   über die vollen 1160 px und bleibt einzeilig), Innenabstand oben nur rund
   20 px. Breiter und flacher also - nicht hoch und schmal. */
/* Die allgemeine Regel "section { padding: clamp(4rem,9vw,7.5rem) 0 }" aus
   styles.css legt oben und unten je 120 px drauf - gemessen 240 px zu viel, der
   Hero wurde dadurch 724 statt 545 px hoch. Auf der Startseite greift sie nicht,
   weil der Hero dort ein .panel im Deck ist. Hier also ausdrücklich abräumen. */
.hero { display: flex; align-items: center; padding: 0; }
.hero > .wrap { width: 100%; position: relative; z-index: 1; }
.hero-top { padding-top: clamp(1.1rem, 2.6vh, 2.2rem); }
.hero-proof { margin-bottom: clamp(1.2rem, 3.4vh, 2.7rem); }

@media (min-width: 701px) {
  .hero { min-height: calc(80vh - 72px); min-height: calc(80svh - 72px); }
}

/* dezentes Logo im Hintergrund - dieselbe Regel wie auf der Startseite, dort
   hängt sie an .page-hero bzw. .stack .panel.hero und greift deshalb bei
   unserem .hero nicht. Werte 1:1 übernommen, inklusive der Startseiten-Variante
   top:120px: das Zeichen sitzt damit auf Höhe von Überschrift und Intro und
   verbindet sich mit dem Text, statt in der Mitte der ganzen Sektion zu schweben. */
.hero .wrap::after {
  content: "";
  position: absolute; right: -4%; top: 120px; z-index: -1;
  width: clamp(220px, 26vw, 380px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("img/dmk-icon-dark-500.png") center / contain no-repeat;
  opacity: .05; pointer-events: none; user-select: none;
}
:root[data-theme="dark"] .hero .wrap::after {
  background-image: url("img/dmk-icon-light-760.webp");
}
@media (max-width: 1100px) {
  .hero .wrap::after { display: none; }
}

/* ---------- dunkler Farbbruch ----------
   Gleiche Optik wie der Zoho-One-Block auf der Startseite. .panel-dark selbst
   ist in styles.css nicht an .stack gebunden, die Innenabstände von
   .panel-inner aber schon - deshalb hier. */
/* auch hier die Sektions-Polsterung abräumen, sonst polstert es doppelt */
.panel-dark { padding: 0; }
.panel-dark .panel-inner { padding: clamp(4rem, 9vw, 7rem) 0; }
.panel-dark .eyebrow { color: var(--blue); }

/* ---------- App-Bausteine ----------
   Die sechs Karten bekommen ein Icon-Feld. Die Glyphen sind bewusst eigene,
   schlichte Zeichen und KEINE Nachbauten der Zoho-Logos; die echten App-Logos
   liegen in der Mediathek nur als weiße Fassung und nur für drei der sechs Apps.
   Farbe läuft über unsere Markenspanne Blau -> Cyan, damit der Block lebendiger
   wirkt, ohne bunt zu werden. */
.app-icon { width: 46px; height: 46px; }
.app-icon svg { width: 24px; height: 24px; }

/* ---------- Reihenfolge beim Aufdecken ----------
   styles.css staffelt nur bis zur vierten Karte:
     .grid > .reveal:nth-child(2|3|4) { transition-delay: .09s | .18s | .27s }
   Auf der Hauptseite reicht das, dort hat kein Raster mehr als vier Kacheln.
   Die Bausteine-Reihe hier hat sechs - Karte 5 und 6 bekamen dadurch GAR keine
   Verzögerung und erschienen zusammen mit Karte 1, also vor 2, 3 und 4. Das sah
   nach Zufall aus.

   Deshalb hier zeilenweise staffeln statt fortlaufend: jede Zeile läuft von
   links nach rechts durch, und die nächste Zeile beginnt wieder bei null.
   Die Spaltenzahl wechselt bei 960 px und 640 px - die Regeln folgen dem. */
@media (min-width: 961px) {
  .grid-3 > .reveal:nth-child(3n + 1) { transition-delay: 0s; }
  .grid-3 > .reveal:nth-child(3n + 2) { transition-delay: .09s; }
  .grid-3 > .reveal:nth-child(3n + 3) { transition-delay: .18s; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .grid-3 > .reveal:nth-child(2n + 1) { transition-delay: 0s; }
  .grid-3 > .reveal:nth-child(2n + 2) { transition-delay: .09s; }
}
/* eine Spalte: jede Karte kommt ohnehin einzeln ins Bild, eine Verzögerung
   würde dort nur wie Verzug wirken.
   Das :nth-child(n) sieht überflüssig aus, ist es aber nicht: ohne den Zusatz
   hat der Selektor die Spezifität 0,2,0 und verliert gegen die Basisregel
   ".grid > .reveal:nth-child(2)" (0,3,0) aus styles.css. Gemessen am 19.08.:
   ohne den Zusatz blieb es einspaltig bei 0/.09/.18/.27/0/0. */
@media (max-width: 640px) {
  .grid-3 > .reveal:nth-child(n) { transition-delay: 0s; }
}

#apps .card:nth-child(1) .app-icon { background: rgba(20, 112, 200, .12); color: #1470C8; }
#apps .card:nth-child(2) .app-icon { background: rgba(37, 144, 235, .13); color: #2590EB; }
#apps .card:nth-child(3) .app-icon { background: rgba(56, 168, 240, .14); color: #1E82D8; }
#apps .card:nth-child(4) .app-icon { background: rgba(84, 190, 243, .15); color: #1B79C9; }
#apps .card:nth-child(5) .app-icon { background: rgba(120, 210, 246, .16); color: #1670BC; }
#apps .card:nth-child(6) .app-icon { background: rgba(171, 242, 255, .22); color: #12669F; }

#apps .card:hover .app-icon { background: var(--blue); color: #fff; }

:root[data-theme="dark"] #apps .card .app-icon { background: rgba(37, 144, 235, .16); color: var(--blue); }
:root[data-theme="dark"] #apps .card:nth-child(4) .app-icon,
:root[data-theme="dark"] #apps .card:nth-child(5) .app-icon { background: rgba(120, 210, 246, .16); color: #7ACBF5; }
:root[data-theme="dark"] #apps .card:nth-child(6) .app-icon { background: rgba(171, 242, 255, .18); color: #ABF2FF; }
:root[data-theme="dark"] #apps .card:hover .app-icon { background: var(--blue); color: #06131F; }

/* ---------- Terminbuchung ----------
   Höhen wie auf digital-mit-kopf.de/kontakt/ gemessen. */
#termin .booking-card { height: 1000px; }
#termin .booking-card, #termin .booking-card:hover { transform: none; }
@media (max-width: 760px) { #termin .booking-card { height: 1150px; } }

.termin-direkt {
  margin-top: 1.4rem; text-align: center;
  font-size: .95rem; color: var(--slate);
}
:root[data-theme="dark"] .termin-direkt { color: #A9BCD0; }

/* ---------- Consent-Banner ----------
   Bewusst schlank und ohne Fremd-Skript: das Banner selbst lädt nichts nach.
   Erst eine Zustimmung startet Google Ads bzw. Meta.
   Sitzt mittig auf einem abdunkelnden Grund - die Entscheidung soll man treffen,
   nicht übersehen. Aufbau angelehnt an CCM19 auf der Hauptseite: Titel, Erklärung,
   Kategorien mit Zahl, drei Schaltflächen, Links unten. */
.consent-hg {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10, 22, 38, .55);
  backdrop-filter: blur(2px);
  animation: consent-auf .25s ease both;
}
@keyframes consent-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes consent-rein {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.consent-banner {
  position: fixed; z-index: 9999;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--paper); color: var(--slate);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(10, 22, 38, .35);
  padding: 2rem 2rem 1.6rem;
  font-size: .95rem; line-height: 1.6;
  animation: consent-rein .3s cubic-bezier(.2, .8, .3, 1) both;
}
:root[data-theme="dark"] .consent-banner {
  background: #13263E; color: #A9BCD0; border-color: rgba(255,255,255,.12);
  border-top-color: var(--blue);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.consent-banner h2 {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--ink); margin-bottom: .7rem;
}
:root[data-theme="dark"] .consent-banner h2 { color: #EFF4F9; }
.consent-banner a { color: var(--link); }

/* Kategorien wie im CCM19-Banner: Name, Anzahl, Schalter */
.consent-kat {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .consent-kat { border-top-color: rgba(255,255,255,.12); }
.consent-kat label {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; cursor: pointer;
}
.consent-kat input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--blue-deep); cursor: pointer;
}
.consent-kat input:disabled { cursor: default; opacity: .55; }
/* --mist ist laut styles.css "gedämpft auf DUNKEL" - auf dem hellen Banner
   ergibt es nur 2,15 Kontrast und fällt damit durch AA. Auf hell deshalb
   --slate, auf dunkel der dortige Fließtextton. Gemessen 19.08.2026. */
.consent-kat .kat-zahl { color: var(--slate); font-family: var(--font-mono); font-size: .8rem; }
:root[data-theme="dark"] .consent-kat .kat-zahl { color: #A9BCD0; }

.consent-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem;
}
.consent-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.btn-quiet {
  background: transparent; color: var(--slate);
  border: 1px solid var(--line);
}
.btn-quiet:hover { border-color: var(--link); color: var(--link); }
:root[data-theme="dark"] .btn-quiet { color: #A9BCD0; border-color: rgba(255,255,255,.16); }

.consent-links {
  margin-top: 1.3rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--slate);
}
:root[data-theme="dark"] .consent-links {
  border-top-color: rgba(255,255,255,.12); color: #A9BCD0;
}
/* der Weg zur vollständigen Liste bleibt bewusst zurückhaltend: gleiche
   Schriftgröße wie die Rechtslinks, kein Knopf, erst beim Überfahren blau */
.consent-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent-links a:hover { color: var(--link); }

/* ---------- Liste verwendeter Cookies ---------- */
.consent-banner.zeigt-liste { width: min(760px, calc(100vw - 2.5rem)); }
.ck-gruppe {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  color: var(--link); margin: 1.8rem 0 .2rem;
}
.ck-dienst {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .ck-dienst { border-top-color: rgba(255,255,255,.12); }
.ck-dienst h4 {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--ink); margin-bottom: .4rem;
}
:root[data-theme="dark"] .ck-dienst h4 { color: #EFF4F9; }
/* Feldaufbau wie im CCM19-Dialog der Hauptseite: Bezeichnung als eigene
   Zeile darüber, darunter der Wert. */
.ck-feld { font-size: .88rem; color: var(--slate); margin-top: .9rem; word-break: break-word; }
.ck-feld span {
  display: block; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  margin-bottom: .15rem;
}
:root[data-theme="dark"] .ck-feld { color: #A9BCD0; }
:root[data-theme="dark"] .ck-feld span { color: #EFF4F9; }
.ck-grundlage { margin-top: 1.1rem; }
.ck-tab-titel {
  margin-top: 1.1rem; font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; color: var(--ink);
}
:root[data-theme="dark"] .ck-tab-titel { color: #EFF4F9; }

/* Tabellen laufen bei schmalen Fenstern in ihrem eigenen Rahmen, nie die Seite */
.ck-rahmen { overflow-x: auto; margin-top: .7rem; }
.ck-tabelle { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ck-tabelle th, .ck-tabelle td {
  text-align: left; padding: .45rem .7rem .45rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
:root[data-theme="dark"] .ck-tabelle th, :root[data-theme="dark"] .ck-tabelle td {
  border-bottom-color: rgba(255,255,255,.1);
}
.ck-tabelle th { color: var(--slate); font-weight: 500; white-space: nowrap; }
:root[data-theme="dark"] .ck-tabelle th { color: #A9BCD0; }
.ck-tabelle code {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--link); white-space: nowrap;
}
.ck-hinweis {
  margin-top: 1.6rem; padding: .8rem 1rem;
  border-radius: 10px; background: var(--blue-tint);
  font-size: .84rem;
}
:root[data-theme="dark"] .ck-hinweis { background: rgba(37,144,235,.12); }

@media (max-width: 520px) {
  .consent-banner { padding: 1.6rem 1.4rem 1.3rem; }
  .consent-banner h2 { font-size: 1.15rem; }
  .consent-actions { flex-direction: column; }
  .consent-kat { flex-direction: column; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-hg { animation: none; }
}