/* KerberosStef: the existing design expressed with editable WordPress blocks.
 * Load after the three existing theme styles, both on the site and in the editor.
 * Existing groups use layout.type=default; the original classes own grid/flex.
 */

:where(.wp-block-group, .wp-block-buttons) {
  --wp--style--block-gap: 0;
  box-sizing: border-box;
}

.hero h1 strong,.page-hero h1 strong { color:var(--cyan);font-weight:inherit; }
.wp-block-kerberosstef-demo-field { display:grid;gap:.5rem; }
.wp-block-kerberosstef-demo-button > button { width:100%; }
.ks-demo-editor-label { font-weight:800;font-size:.86rem; }
.ks-demo-editor-note { color:var(--muted);font-size:.82rem; }

:is(.hero, .page-hero, .hero-copy, .hero-visual, .ks-core,
    .section, .section-heading, .card-grid, .story-grid, .skill-grid,
    .card, .skill-card, .project-card, .project-copy,
    .server-preview, .server-topbar, .server-body, .server-row,
    .principle-banner, .profile-badge, .terminal, .terminal-bar, .terminal-body,
    .details-grid, .contact-layout, .contact-info, .contact-points,
    .contact-form, .form-row, .typo3-content).wp-block-group > * {
  margin-block-start: 0;
}

/* A native Group must not acquire a generic flex layout from editor defaults. */
.wp-block-group:is(.hero, .page-hero, .hero-visual, .ks-core,
                  .card-grid, .story-grid, .skill-grid, .project-card,
                  .profile-badge, .principle-banner, .server-row,
                  .details-grid, .contact-layout, .contact-points,
                  .contact-form, .form-row) {
  display: grid;
}

.wp-block-group:is(.hero, .page-hero) {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  align-items: center;
  gap: 5rem;
}
.wp-block-group.hero-visual,
.wp-block-group.ks-core,
.wp-block-group.profile-badge { place-items: center; }
.wp-block-group:is(.card-grid, .story-grid, .skill-grid, .details-grid) { gap: 1rem; }
.wp-block-group.card-grid.three,
.wp-block-group.story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wp-block-group.skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-group.project-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.wp-block-group.principle-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.wp-block-group.details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wp-block-group.contact-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
.wp-block-group.contact-points { gap: .8rem; }
.wp-block-group.contact-form { gap: 1rem; }
.wp-block-group.form-row { gap: .5rem; }
.wp-block-group.form-row.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* Restore semantic paragraph replacements for formerly inline design labels. */
p:is(.node, .card-number, .skill-icon, .status, .profile-label, .profile-caption,
     .server-name, .server-ip, .server-state, .terminal-title,
     .window-label, .principle-number, .principle-label, .principle-text,
     .contact-point-number, .contact-point-label, .card-kicker) {
  margin: 0;
}
.hero-visual > p.node { margin: 0; line-height: 1.65; }
.hero-text > p { margin-block: 1em 0; }
.page-hero > .wp-block-group > p:not(.eyebrow, .profile-label, .profile-caption) { margin-block: 1em 0; }
.typo3-content.wp-block-group > :is(p, ul, ol) { margin-block: 1em 0; }
.typo3-content.wp-block-group > :is(h2, h3, h4) { margin-block: 1.4em .7em; }
.card > p.card-number { color: rgba(8,224,255, .28); font-size: 2.4rem; font-weight: 1000; }
.skill-card > p.skill-icon { color: var(--cyan); font-size: .75rem; font-weight: 1000; margin: 0; }
.card > p.card-kicker { color: var(--cyan); font-size: .72rem; font-weight: 900; }
.project-copy > p.status { display: inline-flex; color: var(--cyan); margin: 0; }
.status::before,
.server-row.wp-block-group::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #08e0ff;
  box-shadow: 0 0 18px #08e0ff;
  flex: 0 0 9px;
}

/* The logo is now a real Image block, including its selectable figure wrapper. */
.ks-core > figure.wp-block-image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 0;
}
.ks-core > figure.wp-block-image > img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Rings are decoration, not empty or inaccessible blocks in the List View. */
.hero-visual:is(.wp-block-group, .wp-block-column)::before,
.hero-visual:is(.wp-block-group, .wp-block-column)::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(8,224,255, .24);
  border-radius: 50%;
  animation: spin 18s linear infinite;
  pointer-events: none;
}
.hero-visual:is(.wp-block-group, .wp-block-column)::after {
  inset: 20%;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 12s;
}

/* Native Buttons supply their own wrapper and link class. */
.wp-block-buttons.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block: 2rem 0;
}
.hero-actions > .wp-block-button { margin: 0; }
.hero-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.65;
  text-decoration: none;
  transition: .18s ease;
  box-shadow: none;
}
.hero-actions .wp-block-button.primary > .wp-block-button__link {
  background: var(--cyan);
  color: #031017;
  border-color: var(--cyan);
}
.hero-actions .wp-block-button.secondary > .wp-block-button__link {
  background: rgba(255, 255, 255, .025);
  color: var(--text);
}
.hero-actions .wp-block-button__link:hover {
  transform: translateY(-2px);
  border-color: rgba(8,224,255, .55);
}

.tag-list.wp-block-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.tag-list.wp-block-list > li { margin: 0; }
.quote-section .wp-block-quote {
  border-inline: 0;
  background: transparent;
  margin: 0;
  padding: 2.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote-section .wp-block-quote > p { margin: 0; font-size: inherit; line-height: inherit; }

.profile-badge > p.profile-label {
  color: var(--cyan);
  font-size: 5rem;
  font-weight: 1000;
  line-height: 1;
  margin: 0;
  z-index: 1;
}
.profile-badge > p.profile-caption {
  position: absolute;
  bottom: 19%;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: .16em;
  margin: 0;
  z-index: 1;
}
.principle-banner > .wp-block-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
  background: #08131a;
}
.principle-banner > .wp-block-group > p { margin: 0; }
.principle-banner > .wp-block-group > p:first-child,
.principle-banner .principle-number { color: var(--red); font-size: 1.4rem; font-weight: 800; }
.principle-banner > .wp-block-group > p:last-child,
.principle-banner .principle-label,
.principle-banner .principle-text { font-weight: 800; }

.server-topbar.wp-block-group,
.terminal-bar.wp-block-group { display: flex; align-items: center; }
.server-topbar.wp-block-group::before,
.terminal-bar.wp-block-group::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 36px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 18px 0 #34434b, 36px 0 #34434b;
}
.server-topbar > p,
.terminal-bar > p,
.server-topbar > .window-label,
.terminal-bar > .window-label { margin: 0 0 0 .5rem; font-size: .82rem; font-weight: 700; }
.wp-block-group.server-row {
  grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
}
.server-row > p { margin: 0; }
.server-row > .online { display: none; }
.server-row > .server-name { color: var(--text); font-weight: 700; }
.server-row > .server-ip { color: #91a9b3; font-family: inherit; }
.server-row > .server-state { color: #08e0ff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.terminal-body .wp-block-code {
  margin: .33rem 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.terminal-body .wp-block-code code { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
pre.ks-terminal-code.wp-block-code {
  margin: 0;
  padding: 1.3rem 1.5rem 1.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b7cbd3;
  font: 400 1rem / 1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
}
pre.ks-terminal-code.wp-block-code > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

.wp-block-details { padding: 1.1rem 1.25rem; }
.wp-block-details > summary { color: var(--text); font-weight: 850; cursor: pointer; }
.wp-block-details > p { color: var(--muted); margin-block: .8em 0; }

.contact-points > .wp-block-group > p { margin: .15rem 0; }
.contact-points > .wp-block-group > p:first-child {
  grid-row: 1 / 3;
  margin: 0;
  color: #ff7a18;
  font-size: 1rem;
  font-weight: 1000;
}
.contact-points .contact-point-number {
  grid-row: 1 / 3;
  color: #ff7a18;
  font-size: 1rem;
  font-weight: 1000;
}
.contact-points > .wp-block-group > p:nth-child(2) { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1; }
.contact-points .contact-point-label { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1; }
.contact-points > .wp-block-group > p:last-child { color: #819aa5; font-size: .88rem; }

@media (max-width: 900px) {
  .wp-block-group:is(.hero, .page-hero) { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .wp-block-group.card-grid.three,
  .wp-block-group.story-grid,
  .wp-block-group.skill-grid,
  .wp-block-group.principle-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-group.project-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .wp-block-group.contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .wp-block-group.card-grid.three,
  .wp-block-group.story-grid,
  .wp-block-group.skill-grid,
  .wp-block-group.principle-banner,
  .wp-block-group.details-grid,
  .wp-block-group.form-row.two-columns { grid-template-columns: minmax(0, 1fr); }
  .wp-block-group.server-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .server-row > .server-ip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual:is(.wp-block-group, .wp-block-column)::before,
  .hero-visual:is(.wp-block-group, .wp-block-column)::after { animation: none; }
}

/* Startseite: echte, im Editor bedienbare Spalten. */
.hero.wp-block-columns {
  --wp--style--block-gap:0;
  display:flex;
  align-items:center !important;
  gap:clamp(2rem,5vw,5rem);
  margin-block:0;
}
.hero.wp-block-columns > .wp-block-column {
  --wp--style--block-gap:0;
  min-width:0;
}
.hero.wp-block-columns > .hero-copy.wp-block-column { order:0; }
.hero.wp-block-columns > .hero-visual.wp-block-column {
  order:1;
  display:grid;
  place-items:center;
  align-self:center;
  position:relative;
  width:auto;
  max-width:430px;
  aspect-ratio:1;
  min-height:0;
  --orbit-radius:clamp(110px,15vw,172px);
}
@media (min-width:782px) {
  .hero.wp-block-columns { flex-wrap:nowrap !important; }
  .hero.wp-block-columns > .hero-visual.wp-block-column { flex-shrink:1; }
}
@media (max-width:781px) {
  .hero.wp-block-columns { gap:2.5rem; }
  .hero.wp-block-columns > .hero-copy.wp-block-column { flex-basis:100% !important; }
  .hero.wp-block-columns > .hero-visual.wp-block-column {
    flex-basis:auto !important;
    flex-grow:0;
    flex-shrink:0;
    width:min(300px,76vw);
    margin-inline:auto;
    order:1;
    --orbit-radius:120px;
  }
}


/* Cyan und Orange aus dem freigegebenen KerberosStef-Logo. */
.hero-visual:is(.wp-block-group, .wp-block-column)::after {
  border-color: rgba(255,122,24,.55);
}
.hero-visual > .node-b {
  color: var(--orange);
  border-color: rgba(255,122,24,.5);
}
.hero-actions .wp-block-button.secondary > .wp-block-button__link {
  color: var(--orange);
  border-color: rgba(255,122,24,.6);
}
.hero-actions .wp-block-button.secondary > .wp-block-button__link:hover {
  border-color: var(--orange);
  background: rgba(255,122,24,.08);
}
.card > p.card-number { color: rgba(255,122,24,.68); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cyan); }


/* WebP Express picture wrappers keep the existing logo sizing. */
.brand-mark > picture,
.ks-core > figure.wp-block-image > picture { display: contents; }

/* Audioplayer in KerberosStefs Orange, auf der Website und im Block-Editor. */
audio[controls] {
  --ks-audio-orange: #d25e28;
  accent-color: var(--ks-audio-orange);
  background-color: var(--ks-audio-orange);
  color-scheme: light;
  border-radius: 999px;
}
audio::-webkit-media-controls-enclosure {
  background-color: #d25e28;
}
audio::-webkit-media-controls-panel {
  background-color: #d25e28;
}


/* Shared header/footer surface and soft shadows at 70% opacity. */
:root {
  --ks-chrome-background: rgba(5, 11, 16, .8);
  --shadow: var(--ks-text-shadow);
}
.site-header,
.site-footer {
  background: var(--ks-chrome-background);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
:is(.card, .skill-card, .project-card, .terminal, details,
    .contact-info, .contact-form, .typo3-content, .principle-banner) {
  box-shadow: var(--shadow);
}

/* Streamplan: native editable Groups, headings, paragraphs and buttons. */
.ks-streamplan-page { padding-block: clamp(3.5rem, 7vw, 6rem) 1rem; }
.ks-streamplan-layout.wp-block-group {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: 4rem;
}
.ks-streamplan-intro h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  letter-spacing: -.055em;
  line-height: 1;
}
.ks-streamplan-intro > p:not(.eyebrow) {
  max-width: 650px;
  color: var(--muted);
}
.ks-streamplan-intro > p.ks-streamplan-lead {
  margin-block: 1.4rem .8rem;
  color: var(--cyan);
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
}
.ks-streamplan-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-top: 3px solid var(--orange);
}
.ks-streamplan-card > p.card-kicker { color: var(--orange); }
.ks-streamplan-card > p.ks-streamplan-callout {
  margin-block: 1.3rem 1.8rem;
  color: var(--text);
  font-size: clamp(2rem, 3.1vw, 3rem);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.ks-streamplan-card h2 {
  margin-block: 0 .7rem;
  font-size: 1.1rem;
  letter-spacing: 0;
}
.ks-streamplan-card > p.ks-streamplan-channel {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.ks-streamplan-page .card-grid h2 {
  margin-block: .45rem 0;
  font-size: 1.25rem;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .ks-streamplan-layout.wp-block-group { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}



/* Ultramarine content surfaces at 75% opacity, with a cyan/orange border.
 * Backing and frame are independent so the center stays truly translucent.
 */
:root {
  --ks-brand-cyan: #46cced;
  --ks-brand-orange: #d25e28;
  --ks-text-backing: rgba(3, 2, 24, .75);
  --ks-text-frame: linear-gradient(135deg, var(--ks-brand-cyan), var(--ks-brand-orange));
  --ks-text-shadow:
    -10px 10px 32px rgba(70, 204, 237, .1),
    10px 14px 32px rgba(210, 94, 40, .1),
    0 14px 38px rgba(5, 11, 16, .7);
}
.hero.wp-block-columns > .wp-block-column.hero-copy,
.page-hero > .wp-block-group:not(.profile-badge),
.section-heading,
.ks-streamplan-intro,
.quote-section > .wp-block-quote {
  --ks-frame-inset: -24px;
  position: relative;
  isolation: isolate;
}
.hero.wp-block-columns > .wp-block-column.hero-copy::before,
.page-hero > .wp-block-group:not(.profile-badge)::before,
.section-heading::before,
.ks-streamplan-intro::before,
.quote-section > .wp-block-quote::before {
  content: "";
  position: absolute;
  inset: var(--ks-frame-inset);
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius, 22px);
  background: var(--ks-text-backing);
  box-shadow: var(--ks-text-shadow);
}
:is(.card, .skill-card, .project-card, .terminal, details, .contact-info, .contact-form, .typo3-content, .principle-banner) {
  --ks-frame-inset: 0px;
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: var(--ks-text-backing);
}
.card:hover,
.skill-card:hover { border-color: transparent; }
.ks-streamplan-card { border-top-width: 1px; }
.principle-banner > .wp-block-group { background: transparent; }

/* The excluded mask center leaves the 75% blue background untouched. */
.hero.wp-block-columns > .wp-block-column.hero-copy::after,
.page-hero > .wp-block-group:not(.profile-badge)::after,
.section-heading::after,
.ks-streamplan-intro::after,
.quote-section > .wp-block-quote::after,
.card::after,
.skill-card::after,
.project-card::after,
.terminal::after,
details::after,
.contact-info::after,
.contact-form::after,
.typo3-content::after,
.principle-banner::after {
  content: "";
  position: absolute;
  inset: var(--ks-frame-inset, 0px);
  z-index: -1;
  box-sizing: border-box;
  padding: 4px;
  border-radius: var(--radius, 22px);
  background: var(--ks-text-frame);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero.wp-block-columns > .wp-block-column.hero-copy,
  .page-hero > .wp-block-group:not(.profile-badge),
  .section-heading,
  .ks-streamplan-intro,
  .quote-section > .wp-block-quote {
    --ks-frame-inset: -12px;
  }
}

/* Center section heading panels and their text on the site and in the editor. */
.section-heading,
.section-heading.left {
  margin-inline: auto;
  text-align: center;
}

/* Native WordPress menu lists preserve the existing header/footer layout. */
.ks-nav-list,
.ks-footer-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-nav-list { justify-content: flex-end; }
.ks-nav-list .menu-item,
.ks-footer-list .menu-item {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ks-nav-list a,
.ks-footer-list a { display: block; }
.ks-footer-list a[aria-current="page"] { color: var(--cyan); }
:is(.ks-nav-list, .ks-footer-list) a:focus-visible {
  outline: 2px solid var(--ks-brand-cyan, #46cced);
  outline-offset: 2px;
}
:is(.ks-nav-list, .ks-footer-list) .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 190px;
  display: grid;
  gap: .2rem;
  list-style: none;
  margin: 0;
  padding: .4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 11, 16, .97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
:is(.ks-nav-list, .ks-footer-list) .menu-item:hover > .sub-menu,
:is(.ks-nav-list, .ks-footer-list) .menu-item:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
:is(.ks-nav-list, .ks-footer-list) .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}
@media (max-width: 820px) {
  .ks-nav-list { justify-content: flex-start; }
  :is(.ks-nav-list, .ks-footer-list) .sub-menu {
    position: static;
    min-width: 0;
    margin-top: .35rem;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}