/* IT & SmartHome Baukasten: Design.
   Ruhig, zentriert, großzügig. Große Schrift auf Weiß, weiche graue Kacheln, eine Akzentfarbe.
   Einstellbare Werte (Akzent, Breite, Rundungen, Bewegung) kommen als --itsh-* aus Design > Theme-Einstellungen. */

:root {
  --c-bg: #FFFFFF;
  --c-tile: #F5F5F7;
  --c-ink: #1D1D1F;
  --c-ink-2: #6E6E73;
  --c-line: #D2D2D7;
  --c-nav: rgb(255 255 255 / .82);

  --bg: var(--c-bg);
  --tile: var(--c-tile);
  --ink: var(--c-ink);
  --ink-2: var(--c-ink-2);
  --line: var(--c-line);
  --nav-bg: var(--c-nav);
  --field-bg: var(--c-bg);

  --accent: var(--itsh-accent, #0A5BD6);
  --btn: var(--itsh-accent, #0A5BD6);
  --btn-ink: var(--itsh-accent-ink, #FFFFFF);

  --stage-1: #DCE8FF;
  --stage-2: #F2F4F8;

  --r-tile: var(--itsh-r-tile, 28px);
  --r-small: var(--itsh-r-small, 14px);
  --r-btn: var(--itsh-r-btn, 980px);
  --wrap-w: var(--itsh-wrap, 80rem);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #000000;
    --c-tile: #1D1D1F;
    --c-ink: #F5F5F7;
    --c-ink-2: #A1A1A6;
    --c-line: #424245;
    --c-nav: rgb(22 22 23 / .82);
    --accent: var(--itsh-accent-dark, #5AA2FF);
    --stage-1: #10223F;
    --stage-2: #1D1D1F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-bg: #000000;
  --c-tile: #1D1D1F;
  --c-ink: #F5F5F7;
  --c-ink-2: #A1A1A6;
  --c-line: #424245;
  --c-nav: rgb(22 22 23 / .82);
  --accent: var(--itsh-accent-dark, #5AA2FF);
  --stage-1: #10223F;
  --stage-2: #1D1D1F;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Abschnitte -------------------------------------------------------------- */
.itsh-section {
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(4rem, 11vw, 8rem);
  font-size: calc(1.0625rem * var(--t-scale, 1));
  line-height: 1.47;
}
.itsh-section.sp-s { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.itsh-section.sp-l { padding-block: clamp(5.5rem, 14vw, 11rem); }
.itsh-section :where(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
.itsh-section :where(h1, h2, h3) { text-wrap: balance; }
.itsh-section a { color: inherit; }

.bg-grey { --bg: var(--c-tile); --tile: var(--c-bg); --field-bg: var(--c-bg); }
.bg-dark {
  --bg: #000000; --tile: #1D1D1F; --ink: #F5F5F7; --ink-2: #A1A1A6; --line: #424245;
  --accent: var(--itsh-accent-dark, #5AA2FF); --field-bg: #000000; --nav-bg: rgb(22 22 23 / .82);
  --stage-1: #10223F; --stage-2: #1D1D1F;
  color-scheme: dark;
}
.bg-accent {
  --bg: var(--itsh-accent, #0A5BD6);
  --ink: var(--itsh-accent-ink, #FFFFFF);
  --ink-2: color-mix(in srgb, var(--itsh-accent-ink, #FFFFFF) 78%, var(--itsh-accent, #0A5BD6));
  --line: color-mix(in srgb, var(--itsh-accent-ink, #FFFFFF) 30%, var(--itsh-accent, #0A5BD6));
  --tile: color-mix(in srgb, var(--itsh-accent-ink, #FFFFFF) 14%, var(--itsh-accent, #0A5BD6));
  --field-bg: color-mix(in srgb, var(--itsh-accent-ink, #FFFFFF) 10%, var(--itsh-accent, #0A5BD6));
  --accent: var(--itsh-accent-ink, #FFFFFF);
  --btn: var(--itsh-accent-ink, #FFFFFF);
  --btn-ink: var(--itsh-accent, #0A5BD6);
}

.wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: var(--wrap-pad, 16px);
}
.center { text-align: center; }

.kicker { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; color: var(--ink-2); letter-spacing: -.015em; }
.h2 { font-size: calc(clamp(2.2rem, 6.4vw, 3.6rem) * var(--h-scale, 1)); line-height: 1.07; font-weight: 700; letter-spacing: -.03em; }
.lead { font-size: calc(clamp(1.15rem, 2.4vw, 1.5rem) * var(--t-scale, 1)); line-height: 1.35; color: var(--ink-2); letter-spacing: -.016em; }
.sec-head { display: grid; gap: .9rem; justify-items: center; text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.sec-head .lead { max-width: 34rem; }

.itsh-section a.link { color: var(--accent); text-decoration: none; }
.link::after { content: " \203A"; }
.link:hover { text-decoration: underline; text-underline-offset: .2em; }

.itsh-section a.btn, .itsh-section button.btn, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.5rem;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--btn);
  color: var(--btn-ink);
  font: 400 1.0625rem/1.2 var(--font);
  letter-spacing: -.012em;
  text-decoration: none;
  cursor: pointer;
}
.itsh-section a.btn:hover, .itsh-section button.btn:hover { background: color-mix(in srgb, var(--btn) 86%, #000); }

/* Kopf- und Fußbereich ----------------------------------------------------- */
.site-header-part {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.admin-bar .site-header-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header-part { top: 46px; } }
.site-header-part .bar { min-height: 3rem; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 0; }
.site-header-part .brand { align-items: center; gap: .6rem; }
.site-header-part .wp-block-site-title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.site-header-part .wp-block-site-title a { color: var(--ink); text-decoration: none; }
.site-header-part .wp-block-site-logo { margin: 0; line-height: 0; }
.site-header-part .wp-block-navigation { font-size: .8125rem; gap: 2rem; }
.site-header-part .wp-block-navigation a { color: var(--ink); text-decoration: none; opacity: .85; }
.site-header-part .wp-block-navigation a:hover { opacity: 1; }
/* Mobiles Menü: Der Kopfbereich hat einen Unschärfe-Filter. Der macht ihn zum Bezugsrahmen für "fixed", dadurch war das Menü nur so
   hoch wie die Kopfzeile. Solange das Menü offen ist, wird der Filter ausgeschaltet, dann füllt das Menü den ganzen Bildschirm. */
html.has-modal-open .site-header-part,
.site-header-part:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* WordPress setzt selbst ".wp-block-navigation:not(.has-background) ... { background-color:#fff; color:#000 }". Die Regel ist
   spezifischer, deshalb war das Menü im Dunkelmodus weiß mit hellem Text. Farbe kommt hier immer aus der Theme-Einstellung. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none;
  padding: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--itsh-menu-bg, var(--bg)) !important; color: var(--itsh-menu-ink, var(--ink)) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 5rem 1.5rem 2.5rem; min-height: 100%; }
.admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: 46px; height: calc(100dvh - 46px); }
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--itsh-menu-ink, var(--ink)) !important; opacity: 1; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 1.1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.wp-block-navigation__responsive-container-open { color: var(--ink); }
.wp-block-navigation__responsive-container-close { color: var(--itsh-menu-ink, var(--ink)); top: 1rem; right: 1rem; }

.foot {
  background: var(--c-tile);
  color: var(--c-ink-2);
  padding-block: 2.5rem 2rem;
  border-top: 1px solid var(--c-line);
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: -.005em;
}
.foot .wrap { padding-inline: 16px; }
.foot p { margin: 0; }
.foot .foot-top { align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); }
.foot .foot-links { font-size: .75rem; gap: .4rem 1.5rem; }
.foot .foot-links a { color: var(--c-ink); text-decoration: none; }
.foot .foot-links a:hover { text-decoration: underline; }
.foot .foot-bottom { padding-top: 1rem; }

/* Hero --------------------------------------------------------------------- */
.itsh-hero { padding-block: clamp(4.5rem, 12vw, 8rem) 0; }
.itsh-hero.sp-s { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.itsh-hero.sp-l { padding-top: clamp(6rem, 16vw, 11rem); }
.itsh-hero:not(.bg-default) { padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero-text { display: grid; justify-items: center; text-align: center; gap: 1.4rem; }
.itsh-hero h1 { font-size: calc(clamp(2.6rem, 9vw, 6rem) * var(--h-scale, 1)); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; max-width: 20ch; }
.itsh-hero .lead { max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.75rem; margin-top: .8rem; }

.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(19rem, 44vw, 36rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border-radius: var(--r-tile);
  background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
  overflow: hidden;
}
.stage.has-image { padding: 0; background: var(--tile); }
.stage-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.browser {
  width: min(100%, 46rem);
  border-radius: var(--r-small);
  background: var(--bg);
  box-shadow: 0 30px 80px -24px rgb(10 30 80 / .4), 0 0 0 1px var(--line);
  overflow: hidden;
}
.b-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.b-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.b-url { flex: 1; height: 1.2rem; margin-left: .75rem; border-radius: 980px; background: var(--tile); }
.b-body { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 1.75rem); }
.b-hero { display: grid; justify-items: center; gap: .6rem; padding-block: clamp(.75rem, 3vw, 1.75rem); }
.b-line { display: block; height: .9rem; border-radius: 980px; background: var(--ink); }
.b-line.soft { height: .55rem; background: var(--line); }
.b-pill { display: block; width: 5.5rem; height: 1.6rem; margin-top: .4rem; border-radius: 980px; background: var(--btn); }
.b-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.b-card { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--tile); }
.b-card:first-child { background: color-mix(in srgb, var(--accent) 20%, var(--tile)); }
.float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.1rem .7rem .85rem;
  border-radius: var(--r-small);
  background: var(--nav-bg);
  color: var(--ink);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 40px -16px rgb(10 30 80 / .4), 0 0 0 1px var(--line);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.float svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.float-a { left: 4%; top: 14%; }
.float-b { right: 4%; bottom: 12%; }

/* Leistungen --------------------------------------------------------------- */
/* Spalten, Abstand, Innenabstand, Mindesthöhe und Rundung kommen als Variablen aus dem Block (--cols-d/-t/-m, --tile-gap, --tile-pad, --tile-min, --r-tile). */
.tiles, .refs {
  display: grid;
  gap: var(--tile-gap, 20px);
  grid-auto-flow: dense;
  grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
}
/* Ohne Container-Unterstützung entscheidet die Fensterbreite (Tablet ab 640 px, große Bildschirme ab 768 px). */
@media (min-width: 40rem) {
  .tiles, .refs { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .tiles, .refs { grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); }
}
/* Mit Container-Unterstützung entscheidet die Breite des Bereichs (nicht des Fensters), damit die Spalten bei
   Browser-Zoom, geöffneter Editor-Seitenleiste und kleinen Notebooks zuverlässig bleiben:
   Handy unter 560 px, Tablet 560 bis 719 px, große Bildschirme ab 720 px Breite des Inhaltsbereichs. */
.itsh-services .wrap, .itsh-references .wrap, .itsh-download .wrap { container: itshgrid / inline-size; }
@supports (container-type: inline-size) {
  @container itshgrid (max-width: 559px) {
    .tiles, .refs { grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); }
  }
  @container itshgrid (min-width: 560px) and (max-width: 719px) {
    .tiles, .refs { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); }
  }
  @container itshgrid (min-width: 720px) {
    .tiles, .refs { grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); }
  }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: var(--tile-pad, clamp(1.75rem, 4vw, 2.75rem));
  border-radius: var(--r-tile);
  background: var(--tile);
  color: var(--ink);
  min-width: 0;
}
.tile svg { flex: none; width: var(--icon-size, 44px); height: var(--icon-size, 44px); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.25rem; }
.tile h3 { font-size: var(--tile-title, clamp(1.6rem, 3.4vw, 2.1rem)); line-height: 1.1; font-weight: 600; letter-spacing: -.025em; overflow-wrap: break-word; hyphens: manual; }
.tile p { color: var(--ink-2); max-width: 40ch; }
.tile .link { margin-top: auto; padding-top: .75rem; }
.tile.wide { grid-column: 1 / -1; align-items: center; text-align: center; padding-block: var(--tile-pad, clamp(2.5rem, 7vw, 4.5rem)); }
.tile.wide p { max-width: 46ch; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.4; }
@media (min-width: 40rem) { .tile { min-height: var(--tile-min, 22rem); } .tile.wide { min-height: 0; } }
@media (min-width: 48rem) {
  .dcols-3 .tile.wide, .dcols-4 .tile.wide { grid-column: span 2; }
}
@supports (container-type: inline-size) {
  @container itshgrid (max-width: 559px) { .tile { min-height: 0; } }
  @container itshgrid (max-width: 719px) { .tile.wide { grid-column: 1 / -1; } }
  @container itshgrid (min-width: 560px) { .tile { min-height: var(--tile-min, 22rem); } .tile.wide { min-height: 0; } }
  @container itshgrid (min-width: 720px) {
    .dcols-3 .tile.wide, .dcols-4 .tile.wide { grid-column: span 2; }
  }
}
/* Bei schmalen Kacheln (3 oder 4 Spalten auf kleineren Bildschirmen) etwas kompakter. */
@container itshgrid (min-width: 720px) and (max-width: 960px) {
  .dcols-3 .tile, .dcols-4 .tile { padding: var(--tile-pad, 1.5rem); }
  .dcols-3 .tile h3, .dcols-4 .tile h3 { font-size: var(--tile-title, 1.45rem); }
  .dcols-3 .tile p, .dcols-4 .tile p { font-size: .95rem; }
}

/* Ausrichtung */
.talign-left .tile.wide { align-items: flex-start; text-align: left; }
.talign-center .tile { align-items: center; text-align: center; }
.talign-center .tile p { margin-inline: auto; }

/* Kachelstil */
.tilebg-outline .tile, .tilebg-outline .ref { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.tilebg-accent .tile, .tilebg-accent .ref {
  --ink: var(--btn-ink);
  --ink-2: color-mix(in srgb, var(--btn-ink) 80%, var(--btn));
  --accent: var(--btn-ink);
  background: var(--btn);
}
.tilebg-accent .ref .ref-domain { color: var(--btn-ink); }

/* Effekt beim Darüberfahren (nutzt transform, damit die Scroll-Animation nicht stört) */
@media (prefers-reduced-motion: no-preference) {
  .thover-scale .tile, .thover-scale .ref, .thover-lift .tile, .thover-lift .ref { transition: transform .25s ease, box-shadow .25s ease; }
  .thover-scale .tile:hover, .thover-scale .ref:hover { transform: scale(1.02); }
  .thover-lift .tile:hover, .thover-lift .ref:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgb(0 0 0 / .35); }
}

/* Referenzen --------------------------------------------------------------- */
.ref {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: var(--tile-min, 12rem);
  padding: var(--tile-pad, clamp(1.5rem, 3.4vw, 2.25rem));
  border-radius: var(--r-tile);
  background: var(--tile);
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}
.ref .ref-body { display: contents; }
.ref-name { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.12; font-weight: 600; letter-spacing: -.025em; }
.ref-domain { color: var(--accent); overflow-wrap: anywhere; }
.ref-domain::after { content: " \2197"; }
.ref.has-media { padding: 0; gap: 0; min-height: 0; overflow: hidden; justify-content: flex-start; }
.ref.has-media .ref-body { display: grid; gap: .35rem; padding: var(--tile-pad, clamp(1.25rem, 3vw, 1.75rem)); }
.ref-media { display: block; }
.ref-media img { display: block; width: 100%; aspect-ratio: var(--media-ratio, 16 / 10); object-fit: cover; object-position: top; }
.ref:hover .ref-domain { text-decoration: underline; text-underline-offset: .2em; }
.note { margin-top: 1.5rem; text-align: center; font-size: .9rem; color: var(--ink-2); }

/* Über mich ---------------------------------------------------------------- */
.portrait { width: min(14rem, 60%); margin: 0 auto clamp(2rem, 5vw, 3rem); }
.portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.statement { max-width: 22ch; margin-inline: auto !important; font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.about-text { display: grid; gap: 1.25rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0 !important; color: var(--ink-2); max-width: 44rem; text-align: left; }
.facts { display: grid; gap: 2.5rem; margin-top: clamp(3rem, 8vw, 5.5rem); text-align: center; }
.fact { display: grid; gap: .5rem; justify-items: center; }
.fact strong { font-size: clamp(2.4rem, 6vw, 3.5rem); line-height: 1; font-weight: 700; letter-spacing: -.03em; overflow-wrap: anywhere; }
.fact span { color: var(--ink-2); max-width: 20ch; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kontakt ------------------------------------------------------------------ */
.contact-grid { display: grid; gap: 3rem; }
.details { display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.details dt { font-size: .8125rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.details dd { font-size: 1.15rem; overflow-wrap: anywhere; }
.details a { text-decoration: none; color: var(--accent) !important; }
.details a:hover { text-decoration: underline; text-underline-offset: .2em; }
.copy { margin-left: .75rem; padding: 0; border: 0; background: none; color: var(--accent); font: 400 .9rem/1 var(--font); cursor: pointer; }
.copy:hover { text-decoration: underline; text-underline-offset: .2em; }

.form-wrap { min-width: 0; }
.form { display: grid; gap: 1rem; min-width: 0; }
.form-row { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; min-width: 0; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-small);
  background: var(--field-bg);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--font);
  letter-spacing: -.012em;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; font-size: .875rem; color: var(--ink-2); }
.check input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--btn); }
.check a { color: var(--accent); }
.form .btn { justify-self: start; margin-top: .5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { margin: 0 0 1.25rem !important; padding: .9rem 1.1rem; border-radius: var(--r-small); font-size: .95rem; }
.notice.ok { background: color-mix(in srgb, #1F9D55 16%, var(--bg)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, #1F9D55 55%, transparent); }
.notice.err { background: color-mix(in srgb, #D93025 14%, var(--bg)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, #D93025 55%, transparent); }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) {
  .contact-grid:not(.single) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6rem; }
  .contact-grid.single { max-width: 44rem; margin-inline: auto; }
}

/* Text mit Bild ------------------------------------------------------------ */
.feature-grid { display: grid; gap: 2.5rem; align-items: center; }
.feature-copy { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
.feature-copy .lead { max-width: 36rem; }
.feature-media { min-width: 0; }
.feature-media img, .media-placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-tile); }
.media-placeholder { background: linear-gradient(160deg, var(--stage-1), var(--stage-2)); }
@media (min-width: 60rem) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; }
  .reverse .feature-media { order: -1; }
}

/* Aktionsband -------------------------------------------------------------- */
.itsh-cta .cta-inner { display: grid; justify-items: center; text-align: center; gap: 1.1rem; }
.itsh-cta .lead { max-width: 36rem; }
.itsh-cta .btn { margin-top: .5rem; }

/* Normale Seiten und Beiträge ---------------------------------------------- */
.itsh-main > :where(.wp-block-post-title, .wp-block-post-content, .wp-block-query) { padding-inline: 16px; }
.itsh-prose { padding-block: clamp(3rem, 8vw, 6rem); }
.itsh-prose .wp-block-post-title { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.07; letter-spacing: -.03em; margin-bottom: 2rem; }
.itsh-prose :where(h2, h3) { letter-spacing: -.02em; margin-top: 2rem; }
.itsh-prose :where(p, ul, ol) { margin-block: 1em 0; }
.itsh-prose .wp-block-post-template { list-style: none; padding: 0; display: grid; gap: 2rem; }
.itsh-prose .wp-block-post-title a { color: var(--ink); text-decoration: none; }

/* Website-Editor: Baukasten-Blöcke immer über die volle Breite (nicht auf die Textbreite begrenzt). */
.editor-styles-wrapper [class*="wp-block-itsh-"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Hero: Übersicht mit Infos -------------------------------------------------- */
.stage:has(.overview) { padding: min(var(--stage-pad, 48px), 6vw); min-height: 0; }
.overview {
  width: min(100%, var(--stage-w, 960px));
  border-radius: var(--r-small);
  background: var(--bg);
  box-shadow: 0 30px 80px -24px rgb(10 30 80 / .4), 0 0 0 1px var(--line);
  overflow: hidden;
  text-align: left;
}
.ov-bar { display: flex; align-items: center; gap: .4rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.ov-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--line); }
.ov-title { margin-left: .75rem; font-size: .85rem; font-weight: 600; color: var(--muted, var(--ink)); letter-spacing: -.01em; }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--ov-gap, 12px); padding: clamp(.9rem, 2.5vw, 1.5rem); }
.ov-card { display: grid; align-content: start; gap: .4rem; padding: var(--ov-card-pad, 18px); border-radius: 14px; background: var(--tile); }
.ov-card:first-child { background: color-mix(in srgb, var(--accent) 14%, var(--tile)); }
.ov-card strong { font-size: 1.05rem; letter-spacing: -.015em; }
.ov-card > span:last-child { font-size: .88rem; line-height: 1.45; color: var(--muted, var(--ink)); opacity: .85; }
.ov-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .3rem; border-radius: 10px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.ov-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--line); }
.ov-stats > div { display: grid; gap: .15rem; padding: 1rem 1.25rem; }
.ov-stats > div + div { border-left: 1px solid var(--line); }
.ov-stats strong { font-size: 1.15rem; letter-spacing: -.02em; color: var(--accent); }
.ov-stats span { font-size: .82rem; opacity: .75; }
@media (max-width: 40rem) { .ov-stats > div + div { border-left: 0; border-top: 1px solid var(--line); } }

.ov-fixed .ov-cards { grid-template-columns: repeat(var(--ov-cols, 4), minmax(0, 1fr)); }
@media (max-width: 48rem) { .ov-fixed .ov-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .ov-fixed .ov-cards { grid-template-columns: 1fr; } }

/* Feinabstimmung: Ausrichtung und Sichtbarkeit pro Abschnitt ------------------ */
.ca-left .hero-text, .ca-left .sec-head { justify-items: start; text-align: left; }
.ca-right .hero-text, .ca-right .sec-head { justify-items: end; text-align: right; }
.ca-center .hero-text, .ca-center .sec-head { justify-items: center; text-align: center; }
.ca-left .hero-actions { justify-content: flex-start; }
.ca-right .hero-actions { justify-content: flex-end; }
@media (max-width: 47.99rem) { body:not(.editor-styles-wrapper) .hide-m { display: none !important; } }
@media (min-width: 48rem) { body:not(.editor-styles-wrapper) .hide-d { display: none !important; } }

/* Popups ---------------------------------------------------------------------- */
dialog.itsh-popup {
  width: min(calc(100vw - 24px), var(--pop-w, 720px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-tile, 24px);
  background: var(--c-bg, #fff);
  color: var(--c-ink, #1d1d1f);
  box-shadow: 0 40px 120px -20px rgb(0 0 0 / .5);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.itsh-popup::backdrop { background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.itsh-popup[open] { animation: itsh-pop .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes itsh-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.itsh-popup[open] { animation: none; } }
.popup-body { padding: var(--pop-pad, 32px); }
.popup-body > .itsh-section { padding-block: 0; background: transparent; }
.popup-body .wrap { padding-inline: 0; }
.popup-close {
  position: sticky; top: 10px; float: right; z-index: 2;
  width: 2.4rem; height: 2.4rem; margin: 10px 10px -2.4rem 0;
  border: 0; border-radius: 50%;
  background: var(--c-tile, #f5f5f7); color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.popup-close:hover { background: color-mix(in srgb, var(--c-tile, #f5f5f7) 80%, #000); }
html.itsh-popup-open { overflow: hidden; }

/* Logo mit automatischem Hell/Dunkel-Wechsel ---------------------------------- */
a.itsh-logo { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.015em; }
.itsh-logo img { display: block; max-width: none; }
.itsh-logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .itsh-logo.has-dark .logo-light { display: none; }
  :root:not([data-theme="light"]) .itsh-logo.has-dark .logo-dark { display: block; }
  :root:not([data-theme="light"]) .itsh-logo.invert-dark .logo-light { filter: invert(1) hue-rotate(180deg); }
}
:root[data-theme="dark"] .itsh-logo.has-dark .logo-light { display: none; }
:root[data-theme="dark"] .itsh-logo.has-dark .logo-dark { display: block; }
:root[data-theme="dark"] .itsh-logo.invert-dark .logo-light { filter: invert(1) hue-rotate(180deg); }

/* Cookie-Banner ---------------------------------------------------------------- */
.itsh-consent { position: fixed; z-index: 99999; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: 12px; pointer-events: none; font-family: var(--font); color: var(--c-ink); }
.itsh-consent[hidden] { display: none; }
.itsh-consent .consent-box {
  pointer-events: auto; width: min(100%, 44rem); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 1.4rem 1.5rem; border-radius: var(--r-tile, 24px);
  background: var(--c-nav, rgb(255 255 255 / .86)); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .4), 0 0 0 1px var(--c-line, rgb(0 0 0 / .1));
  animation: itsh-consent-in .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes itsh-consent-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .itsh-consent .consent-box { animation: none; } }
.itsh-consent h2 { margin: 0 0 .4rem; font-size: 1.2rem; letter-spacing: -.02em; }
.itsh-consent p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.5; color: var(--c-ink-2, #6e6e73); }
.itsh-consent .consent-links { margin: 0; font-size: .85rem; }
.itsh-consent a { color: var(--accent, #0a5bd6); }
.consent-detail[hidden] { display: none; }
.consent-detail { display: grid; gap: .5rem; margin-top: 1rem; }
.consent-cat label { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: var(--r-small, 14px); background: var(--c-tile, #f5f5f7); cursor: pointer; }
.consent-cat span { display: grid; gap: .15rem; }
.consent-cat strong { font-size: .95rem; }
.consent-cat small { font-size: .82rem; line-height: 1.4; color: var(--c-ink-2, #6e6e73); }
.consent-cat input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; accent-color: var(--accent, #0a5bd6); }
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.itsh-consent .btn { flex: 1 1 10rem; min-height: 2.8rem; padding: .7rem 1.2rem; border: 0; border-radius: 980px; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; background: var(--btn, #0a5bd6); color: var(--btn-ink, #fff); }
.itsh-consent .btn.btn-alt { background: var(--c-tile, #f5f5f7); color: var(--c-ink, #1d1d1f); box-shadow: inset 0 0 0 1px var(--c-line, rgb(0 0 0 / .12)); }
.itsh-consent .btn[hidden] { display: none; }
.itsh-consent .consent-config { flex: 0 0 auto; padding: .5rem .3rem; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--accent, #0a5bd6); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.itsh-consent.layout-bar { padding: 0; }
.itsh-consent.layout-bar .consent-box { width: 100%; border-radius: 0; display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center; }
.itsh-consent.layout-bar .consent-detail { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 48rem) { .itsh-consent.layout-bar .consent-box { grid-template-columns: 1fr; } }
.itsh-consent.layout-center { inset: 0; align-items: center; background: rgb(0 0 0 / .45); pointer-events: auto; }
:root[data-theme="dark"] .itsh-consent { --c-ink: #f5f5f7; --c-ink-2: #a1a1a6; --c-tile: #2a2a2d; --c-line: rgb(255 255 255 / .14); --c-nav: rgb(22 22 23 / .88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .itsh-consent { --c-ink: #f5f5f7; --c-ink-2: #a1a1a6; --c-tile: #2a2a2d; --c-line: rgb(255 255 255 / .14); --c-nav: rgb(22 22 23 / .88); } }

/* Downloads ---------------------------------------------------------------------- */
.dl-tile { gap: .6rem; }
.dl-tile h3 { font-size: var(--tile-title, 1.5rem); }
.dl-tile svg { margin-bottom: .6rem; }
.dl-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.dl-meta li { padding: .25rem .7rem; border-radius: 980px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: .82rem; color: var(--ink-2); }
.dl-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .8rem; max-width: none !important; }
.dl-sum span { font-weight: 600; }
.dl-sum code { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-size: .75rem; color: var(--ink-2); }
.dl-hint { font-size: .85rem; color: var(--ink-2); max-width: none !important; }
.dl-hint a { color: var(--accent); }
.dl-tile .dl-btn { margin-top: auto; align-self: flex-start; }
.talign-center .dl-tile .dl-btn, .ca-center .dl-tile .dl-btn { align-self: center; }
.dl-missing { margin-top: auto; font-size: .85rem; color: var(--ink-2); }
.dl-note { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-2); text-align: center; }
.dl-sum .copy { margin-left: 0; }

.dl-badge { align-self: flex-start; padding: .25rem .7rem; border-radius: 980px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.dl-badge.is-free { color: #1a7f45; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1a7f45 50%, transparent); }
.dl-badge.is-paid { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.dl-badge.is-soon { color: #9a6700; box-shadow: inset 0 0 0 1px color-mix(in srgb, #9a6700 50%, transparent); }
.dl-price { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink) !important; max-width: none !important; }
.dl-tile a.link.dl-btn { margin-top: auto; align-self: flex-start; }
.dl-note a { color: var(--accent); }

/* Download-Bibliothek 1.1.3: App-Icon, Testversion + Lizenz, Funktionen, Änderungen, Filter und Suche. */
.dl-tile[hidden] { display: none !important; }
.dl-appicon { display: block; width: 64px; height: 64px; margin-bottom: .6rem; }
.dl-appicon img { display: block; width: 64px; height: 64px; object-fit: contain; }
.dl-appicon.has-dark .ai-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dl-appicon.has-dark .ai-light { display: none; }
  :root:not([data-theme="light"]) .dl-appicon.has-dark .ai-dark { display: block; }
}
:root[data-theme="dark"] .dl-appicon.has-dark .ai-light { display: none; }
:root[data-theme="dark"] .dl-appicon.has-dark .ai-dark { display: block; }
.dl-badge.is-trial { color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.dl-features { width: 100%; }
.dl-features-title { font-size: .82rem; font-weight: 600; color: var(--ink) !important; margin-bottom: .35rem; }
.dl-features ul, .dl-changes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.dl-features li, .dl-changes li { position: relative; padding-left: 1.2rem; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.dl-features li::before { content: ""; position: absolute; left: .1rem; top: .3em; width: .55rem; height: .3rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.dl-changes li::before { content: ""; position: absolute; left: .3rem; top: .55em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--ink-2); }
.dl-changes { width: 100%; font-size: .9rem; }
.dl-changes summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.dl-changes summary::-webkit-details-marker { display: none; }
.dl-changes summary::after { content: ""; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.1rem) rotate(45deg); transition: transform .2s; }
.dl-changes[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.dl-changes ul { margin-top: .6rem; }
.dl-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.dl-tile .dl-actions .dl-btn { margin-top: 0; }
.talign-center .dl-actions, .ca-center .dl-actions { justify-content: center; }
.itsh-section a.btn.is-alt { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px currentColor; }
.itsh-section a.btn.is-alt:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dl-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.dl-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.dl-chip { padding: .5rem 1rem; border: 0; border-radius: 980px; font: inherit; font-size: .9rem; cursor: pointer; background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dl-chip:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.dl-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.dl-search { flex: 1 1 14rem; max-width: 22rem; min-height: 2.6rem; padding: .55rem 1rem; border: 0; border-radius: 980px; font: inherit; font-size: .95rem; background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.dl-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.dl-filter:only-child, .dl-search:only-child { margin-inline: auto; }
.dl-empty { margin-top: 1.5rem; text-align: center; color: var(--ink-2); }
.dl-empty a { color: var(--accent); }
.dl-empty[hidden] { display: none; }
.itsh-section .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }