/*
Theme Name: ARTOPIA
Theme URI: https://artopia.de/
Author: ARTOPIA
Author URI: https://artopia.de/
Description: Eigenständiges WordPress-Theme für ARTOPIA – Kunst, Geschichte, Begegnung und der Weg zur Kulturfahrschule.
Version: 1.4.4
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: artopia
*/

:root {
  --yellow: #ffca05;
  --ink: #111111;
  --paper: #f6f0e5;
  --white: #fffdf8;
  --red: #ee3e42;
  --pink: #f24d91;
  --blue: #1558d6;
  --purple: #642d91;
  --green: #49ad66;
  --orange: #f0821f;
  --line: 3px solid var(--ink);
  --shadow: 10px 10px 0 var(--ink);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
.admin-bar .site-header { top: 50px; }
.admin-bar .site-header.is-scrolled { top: 40px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--ink);
  color: white;
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  padding: 9px 12px 9px 18px;
  transform: translateX(-50%);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(12px);
  transition: top .25s ease, background .25s ease;
}
.site-header.is-scrolled { top: 8px; background: rgba(255, 253, 248, 0.97); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 900 1.8rem/1 Arial Black, Arial, sans-serif;
  letter-spacing: -.09em;
  text-decoration: none;
}
.brand-dot { display: none; }
.brand > span:last-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.brand::before {
  content: "";
  width: 158px;
  height: 42px;
  flex: 0 0 auto;
  background: url("assets/artopia-wordmark-original.jpg") center center / 100% auto no-repeat;
}
.brand::after {
  content: none;
  display: none;
}
.brand-dot {
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: conic-gradient(var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--red));
}
.main-nav { display: flex; align-items: center; gap: 28px; font-weight: 800; font-size: .92rem; }
.main-nav a { text-decoration: none; }
.main-nav a:not(.nav-cta):hover { text-decoration: underline 3px var(--red); text-underline-offset: 7px; }
.nav-cta { padding: 11px 16px; border-radius: 12px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.nav-cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.language-switcher { display: flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 2px solid var(--ink); }
.language-switcher a { display: grid; width: 31px; height: 31px; place-items: center; border: 1.5px solid transparent; border-radius: 50%; font-size: .68rem; font-weight: 900; line-height: 1; text-decoration: none; }
.language-switcher a:hover,
.language-switcher a:focus-visible { border-color: var(--ink); background: var(--paper); }
.language-switcher a[aria-current="page"] { border-color: var(--ink); background: var(--yellow); box-shadow: 2px 2px 0 var(--ink); }
.menu-toggle { display: none; width: 46px; height: 42px; border: 2px solid var(--ink); border-radius: 11px; background: var(--yellow); }
.menu-toggle > span:not(.sr-only) { display: block; width: 21px; height: 2px; margin: 4px auto; background: var(--ink); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  align-items: center;
  min-height: 880px;
  padding: 136px max(5vw, calc((100vw - 1240px) / 2)) 80px;
  background:
    radial-gradient(circle at 10% 24%, rgba(238,62,66,.12) 0 2px, transparent 3px) 0 0 / 26px 26px,
    var(--paper);
}
.hero-copy { max-width: 730px; position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .78rem;
}
h1, h2, h3 { margin-top: 0; font-family: Arial Black, Arial, sans-serif; line-height: .98; letter-spacing: -.055em; }
h1 { max-width: 800px; margin-bottom: 27px; font-size: clamp(3.5rem, 6.7vw, 7.3rem); }
h1 span, h2 span { color: var(--red); }
.hero-lead { max-width: 690px; margin: 0 0 34px; font-size: clamp(1.08rem, 1.6vw, 1.38rem); line-height: 1.5; }
.hero-actions, .launch-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 13px 21px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.button-dark { background: var(--ink); color: var(--white); box-shadow: 5px 5px 0 var(--red); }
.button-light { background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
.button:hover { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.hero-facts { display: flex; gap: 36px; margin: 52px 0 0; }
.hero-facts div { border-left: 3px solid var(--ink); padding-left: 13px; }
.hero-facts dt { font: 900 1.45rem/1 Arial Black, Arial, sans-serif; text-transform: uppercase; }
.hero-facts dd { margin: 4px 0 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; }

.hero-art {
  position: relative;
  width: min(100%, 560px);
  margin-left: auto;
  border: var(--line);
  border-radius: 30px;
  background: #ffcb05;
  box-shadow: 15px 15px 0 var(--ink);
  overflow: hidden;
}
.hero-art::before, .hero-art::after {
  content: none;
}
.hero-logo { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 26px; }
.marquee { overflow: hidden; border-block: var(--line); background: var(--ink); color: var(--white); transform: rotate(-1deg) scale(1.02); }
.marquee-track { display: flex; width: max-content; align-items: center; padding: 15px 0; animation: marquee 32s linear infinite; will-change: transform; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: center; gap: 20px; padding-right: 20px; }
.marquee span { font: 900 1.05rem/1 Arial Black, Arial, sans-serif; text-transform: uppercase; white-space: nowrap; }
.marquee i { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 120px max(5vw, calc((100vw - 1180px) / 2)); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); column-gap: 55px; align-items: end; margin-bottom: 58px; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2, .archive-intro h2, .vision-copy h2 { margin-bottom: 0; font-size: clamp(3rem, 5.5vw, 6rem); }
.section-heading > p:last-child { margin: 0 0 8px; font-size: 1.08rem; }
.section-heading.compact { display: block; max-width: 930px; }

.hinged-frame { position: relative; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hinged-frame::before, .hinged-frame::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 18px;
  width: 18px;
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: inset 0 0 0 3px var(--white);
}
.hinged-frame::before { left: 20px; }
.hinged-frame::after { right: 20px; }
.search-section { background: var(--yellow); border-bottom: var(--line); }
.search-frame { padding: 46px 34px 30px; background: linear-gradient(135deg, var(--red), var(--pink)); }
.search-form { display: grid; grid-template-columns: 1.05fr 1fr .8fr auto; gap: 12px; }
.search-form label { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 10px; border: 2px solid var(--ink); border-radius: 13px; background: var(--white); }
.search-form label > span { font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.search-form select, .search-form input { width: 100%; padding: 3px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 900; }
.search-button { min-width: 130px; border: 2px solid var(--ink); border-radius: 13px; background: var(--ink); color: white; font-weight: 900; cursor: pointer; }
.search-button:hover { background: var(--yellow); color: var(--ink); }
.search-feedback { min-height: 1.5em; margin: 18px 4px 0; font-weight: 900; }

.world-section { background: var(--white); }
.definition-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
  margin-bottom: 58px;
  padding: clamp(34px, 5vw, 62px);
  background: var(--yellow);
}
.definition-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.definition-formula span,
.definition-formula strong { font: 400 clamp(2.2rem, 4.8vw, 4.9rem)/.9 "Bauhaus 93", "Arial Rounded MT Bold", sans-serif; }
.definition-formula strong { color: var(--red); }
.definition-formula i { font: 900 1.5rem/1 Arial, sans-serif; font-style: normal; }
.definition-panel h3 { margin-bottom: 18px; font-size: clamp(2rem, 3.6vw, 3.7rem); }
.definition-panel p:last-child { margin: 0; }
.section-kicker { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 54px; border-bottom: var(--line); }
.section-kicker span { font-weight: 900; text-transform: uppercase; }
.section-kicker strong { font: 900 clamp(3rem, 8vw, 8.5rem)/.85 Arial Black, Arial, sans-serif; letter-spacing: -.09em; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.feature-card { min-height: 410px; padding: 64px 38px 36px; color: white; }
.feature-card h3 { max-width: 520px; margin-bottom: 20px; font-size: clamp(2.2rem, 4vw, 4.2rem); }
.feature-card p { max-width: 520px; }
.card-number { position: absolute; right: 25px; top: 21px; font-weight: 900; }
.text-link { position: absolute; left: 38px; right: 38px; bottom: 30px; display: flex; justify-content: space-between; padding-top: 14px; border-top: 2px solid currentColor; font-weight: 900; }
.card-red { background: var(--red); }
.card-blue { background: var(--blue); }
.card-purple { background: var(--purple); }
.card-green { background: var(--green); }

.platform-section { background: var(--paper); }
.platform-heading { margin-bottom: 54px; }
.platform-heading > p:last-child { max-width: 760px; font-size: 1.12rem; }
.platform-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 54px; padding: 0; list-style: none; }
.platform-flow li { min-height: 285px; padding: 25px 22px; border: var(--line); border-radius: 20px; background: var(--white); box-shadow: 6px 6px 0 var(--ink); }
.platform-flow li:nth-child(2) { background: #dbe8ff; }
.platform-flow li:nth-child(3) { background: #f3ddff; }
.platform-flow li:nth-child(4) { background: #dff4e3; }
.platform-flow li > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 900; }
.platform-flow strong { display: block; margin-bottom: 10px; font: 400 1.75rem/1 "Bauhaus 93", "Arial Rounded MT Bold", sans-serif; }
.platform-flow p { margin: 0; font-size: .94rem; }
.then-now { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(32px, 5vw, 58px); background: var(--yellow); }
.then-now article { min-width: 0; }
.then-now h3 { margin-bottom: 16px; font-size: clamp(2rem, 3.5vw, 3.7rem); }
.then-now article > p:last-child { margin-bottom: 0; }
.then-now-arrow { font: 900 clamp(2.5rem, 5vw, 5rem)/1 Arial, sans-serif; }

.universum-teaser { padding-top: 40px; background: var(--paper); }
.universum-panel { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(35px, 6vw, 78px); align-items: center; padding: clamp(36px, 6vw, 72px); overflow: hidden; background: var(--blue); color: var(--white); }
.universum-panel::before,
.universum-panel::after { background: var(--yellow); }
.universum-mark { display: grid; justify-items: center; gap: 8px; transform: rotate(-3deg); }
.universum-mark span,
.universum-mark strong { font: 400 clamp(4.5rem, 9vw, 9rem)/.78 "Bauhaus 93", "Arial Rounded MT Bold", sans-serif; letter-spacing: -.04em; }
.universum-mark span { color: var(--yellow); }
.universum-mark strong { font-size: clamp(2.6rem, 5.2vw, 5.5rem); }
.universum-mark i { display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--white); border-radius: 50%; font: 900 1.5rem/1 Arial, sans-serif; font-style: normal; }
.universum-copy h2 { margin-bottom: 24px; font-size: clamp(2.8rem, 5vw, 5.4rem); }
.universum-copy h2 span { color: var(--yellow); }
.universum-copy > p:not(.eyebrow) { max-width: 760px; }
.universum-copy .button { margin-top: 18px; box-shadow: 5px 5px 0 var(--yellow); }

.pathways-section { background: var(--paper); }
.pathways-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pathway { position: relative; min-height: 570px; overflow: hidden; padding: 48px 38px; border: var(--line); border-radius: 34px; }
.pathway > div { position: relative; z-index: 2; max-width: 70%; }
.pathway h3 { font-size: clamp(2.4rem, 4.3vw, 4.5rem); }
.pathway ul { padding-left: 1.15em; font-weight: 800; }
.pathway li { margin: 10px 0; }
.pathway img { position: absolute; right: -2%; bottom: -2%; width: 34%; mix-blend-mode: multiply; }
.pathway-label { display: inline-block; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 999px; background: white; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.pathway-artist { background: var(--yellow); box-shadow: 10px 10px 0 var(--red); }
.pathway-host { background: #9bc4ff; box-shadow: 10px 10px 0 var(--blue); }

.archive-section { background: var(--ink); color: var(--white); }
.archive-intro { display: grid; grid-template-columns: 1.25fr .55fr; gap: 60px; align-items: end; margin-bottom: 72px; }
.archive-intro .eyebrow { grid-column: 1 / -1; }
.archive-intro p:last-child { margin-bottom: 8px; color: #d8d2c8; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 0 0 80px; padding: 0; list-style: none; border-top: 2px solid var(--white); }
.timeline li { position: relative; padding: 35px 25px 0 0; }
.timeline li::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border: 2px solid var(--white); border-radius: 50%; background: var(--ink); }
.timeline strong { display: block; margin-bottom: 10px; color: var(--yellow); font: 900 1.3rem Arial Black, Arial, sans-serif; }
.timeline span { display: block; font-size: .9rem; }
.timeline-now::before { background: var(--red) !important; box-shadow: 0 0 0 7px rgba(238,62,66,.3); }
.archive-profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.profile-card { display: flex; align-items: center; gap: 17px; min-height: 116px; padding: 16px; border: 2px solid #4a4742; border-radius: 18px; background: #1b1b1b; }
.profile-card img { width: 78px; height: 78px; flex: 0 0 78px; border: 2px solid var(--white); border-radius: 13px; object-fit: cover; image-rendering: auto; }
.profile-card span { color: var(--yellow); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.profile-card h3 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.12; letter-spacing: -.03em; }
.archive-note { margin: 20px 0 0; color: #aaa59d; font-size: .75rem; }
.archive-note a { font-weight: 800; text-underline-offset: 3px; }
.history-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 58px; border-top: 0; }
.history-timeline li { min-height: 190px; padding: 28px 28px 28px 58px; border: 2px solid #4a4742; border-radius: 18px; background: #1b1b1b; }
.history-timeline li::before { top: 31px; left: 26px; }
.history-timeline .timeline-now { grid-column: 1 / -1; min-height: 0; border-color: var(--red); }
.history-timeline b { color: var(--white); }
.gallery-shell { margin-top: 8px; }
.gallery-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.gallery-toolbar .eyebrow { margin-bottom: 8px; color: var(--yellow); }
.gallery-toolbar h3 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.2rem); }
.gallery-controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.gallery-controls button { width: 46px; height: 46px; border: 2px solid var(--white); border-radius: 50%; background: transparent; color: var(--white); font-weight: 900; cursor: pointer; }
.gallery-controls button:hover,
.gallery-controls button:focus-visible { background: var(--yellow); color: var(--ink); }
.gallery-controls span { min-width: 56px; text-align: center; font-size: .8rem; font-weight: 900; }
.history-gallery { --gallery-visible: 3; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 3); gap: 15px; overflow: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; }
.history-gallery figure { margin: 0; overflow: hidden; border: 2px solid #4a4742; border-radius: 18px; background: #1b1b1b; }
.history-gallery figure { scroll-snap-align: start; }
.history-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #090909; filter: saturate(1.03) contrast(1.03); transition: transform .35s ease, filter .35s ease; }
.history-gallery figure:hover img { transform: scale(1.025); filter: saturate(1.08) contrast(1.04); }
.history-gallery figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; font-size: .82rem; font-weight: 900; }
.history-gallery figcaption span { color: var(--yellow); }
.history-bridge { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; margin-top: 70px; padding: clamp(32px, 5vw, 64px); overflow: hidden; background: var(--yellow); color: var(--ink); }
.history-bridge h3 { margin: 0; font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: .95; }
.history-bridge p:not(.eyebrow) { margin-top: 0; font-size: 1.05rem; }
.history-bridge .button { margin-top: 16px; }

.vision-section { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; background: var(--purple); color: white; }
.vision-copy h2 span { color: var(--yellow); }
.vision-tags { display: flex; flex-wrap: wrap; align-content: center; gap: 12px; }
.vision-tags span { padding: 12px 16px; border: 2px solid white; border-radius: 999px; font-weight: 900; transform: rotate(var(--turn, 0deg)); }
.vision-tags span:nth-child(3n+1) { --turn: -3deg; background: var(--red); }
.vision-tags span:nth-child(3n+2) { --turn: 2deg; background: var(--blue); }
.vision-tags span:nth-child(3n) { --turn: -1deg; background: var(--green); }

.launch-section { background: var(--yellow); }
.launch-panel { display: grid; grid-template-columns: .48fr 1fr; gap: 55px; align-items: center; padding: 55px; background: var(--white); }
.launch-panel > img { width: 100%; border-radius: 28px; mix-blend-mode: multiply; }
.launch-panel h2 { max-width: 760px; margin-bottom: 24px; font-size: clamp(2.7rem, 5vw, 5.3rem); }
.launch-panel p:not(.eyebrow) { max-width: 760px; }
.launch-actions { margin-top: 30px; }

/* ARTOPIA 0.3: ehrlicher Neuaufbau mit Originalmarke */
h1, h2, h3, .section-kicker strong, .bauhaus-kicker {
  font-family: "Bauhaus 93", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 400;
  letter-spacing: .005em;
}
.hero-status {
  display: inline-block;
  margin: 30px 0 0;
  padding: 9px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-size: .82rem;
  font-weight: 900;
}
.concept-heading { align-items: end; }
.concept-label {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 30px;
  padding-top: 14px;
  border-top: 2px solid currentColor;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.archive-intro-honest { grid-template-columns: 1.25fr .7fr; }
.archive-placeholder {
  min-height: 340px;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: clamp(34px, 7vw, 80px);
  background: var(--yellow);
  color: var(--ink);
  text-align: center;
}
.archive-placeholder::before,
.archive-placeholder::after { background: var(--red); }
.archive-placeholder p { max-width: 760px; margin: 0 auto; }
.archive-placeholder .bauhaus-kicker { font-size: clamp(3.3rem, 8vw, 8rem); line-height: .85; }
.archive-placeholder > span { justify-self: center; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.vision-note { align-self: center; max-width: 680px; margin: 0; font-size: 1.08rem; line-height: 1.65; }
.vision-note p { margin: 0 0 18px; }
.vision-note p:last-child { margin-bottom: 0; }
.launch-panel > img { mix-blend-mode: normal; }
.footer-brand { display: inline-grid; justify-items: start; gap: 7px; width: min(280px, 100%); }
.footer-wordmark { width: 220px; height: 58px; background: url("assets/artopia-wordmark-original.jpg") center center / 100% auto no-repeat; filter: invert(1); }
.footer-slogan { color: var(--yellow); font: 400 1.4rem/1 "Bauhaus 93", "Arial Rounded MT Bold", sans-serif; letter-spacing: .01em; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; padding: 70px max(5vw, calc((100vw - 1180px) / 2)); background: var(--ink); color: var(--white); }
.footer-brand { font: 900 3rem/1 Arial Black, Arial, sans-serif; letter-spacing: -.08em; text-decoration: none; }
.footer-brand span { display: block; margin-top: 8px; color: var(--yellow); font: 900 .82rem/1 Arial, sans-serif; letter-spacing: .08em; }
.site-footer > p { margin: 0; align-self: center; text-align: right; }
.footer-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 15px 28px; padding-top: 26px; border-top: 1px solid #555; font-size: .82rem; }
.footer-links span { color: #999; }
.site-footer small { grid-column: 1 / -1; color: #8f8f8f; }

.legal-page { background: var(--paper); }
.legal-header { position: relative; top: auto; left: auto; width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; transform: none; }
.legal-header.is-scrolled { top: auto; }
.legal-nav { display: flex; align-items: center; gap: 18px; font-size: .82rem; font-weight: 900; }
.legal-nav a { text-decoration: none; }
.legal-nav a:hover { text-decoration: underline 3px var(--red); text-underline-offset: 5px; }
.legal-hero { padding: 92px max(5vw, calc((100vw - 1040px) / 2)) 52px; }
.legal-hero h1 { margin: 0; font-size: clamp(3.5rem, 8vw, 7.5rem); }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 50px; align-items: start; padding: 0 max(5vw, calc((100vw - 1040px) / 2)) 120px; }
.legal-toc { position: sticky; top: 24px; padding: 22px; border: 2px solid var(--ink); border-radius: 18px; background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); }
.legal-toc strong { display: block; margin-bottom: 10px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.legal-toc a { display: block; padding: 5px 0; font-size: .85rem; font-weight: 800; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-card { padding: clamp(26px, 5vw, 58px); border: 3px solid var(--ink); border-radius: 28px; background: var(--white); box-shadow: 10px 10px 0 var(--ink); }
.legal-card h2 { margin: 46px 0 14px; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.12; letter-spacing: -.04em; }
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card h3 { margin: 28px 0 8px; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; }
.legal-card p, .legal-card li { color: #35312c; }
.legal-card a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal-card address { font-style: normal; line-height: 1.7; }
.legal-card li { margin: 8px 0; }
.legal-note { margin: 0 0 34px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 14px; background: #fff3bd; }
.legal-note strong { display: block; margin-bottom: 4px; }
.legal-status { display: inline-flex; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.legal-footer { margin-top: 0; }
.check-list { padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border: 2px solid var(--ink); border-radius: 50%; background: var(--green); color: white; font: 900 13px/17px Arial, sans-serif; text-align: center; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 80px; padding-top: 150px; }
  .hero-copy { max-width: 850px; }
  .hero-art { width: min(650px, 90%); margin: 0 auto; }
  .section-heading, .archive-intro, .vision-section { grid-template-columns: 1fr; }
  .archive-intro .eyebrow { grid-column: auto; }
  .search-form { grid-template-columns: repeat(2, 1fr); }
  .search-button { min-height: 58px; }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid white; padding-left: 30px; }
  .timeline li { padding: 0 0 35px 20px; }
  .timeline li::before { top: 5px; left: -39px; }
  .history-timeline { grid-template-columns: 1fr; gap: 14px; border-left: 0; padding-left: 0; }
  .history-timeline li { min-height: 0; padding: 24px 22px 24px 52px; }
  .history-timeline li::before { top: 28px; left: 22px; }
  .history-timeline .timeline-now { grid-column: auto; }
  .definition-panel { grid-template-columns: 1fr; }
  .platform-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .then-now { grid-template-columns: 1fr; }
  .then-now-arrow { transform: rotate(90deg); justify-self: start; }
  .universum-panel { grid-template-columns: 1fr; }
  .universum-mark { justify-items: start; }
  .history-gallery { --gallery-visible: 2; grid-auto-columns: calc((100% - 15px) / 2); }
  .history-bridge { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .site-header { top: 10px; min-height: 60px; }
  .menu-toggle { display: block; }
  .language-switcher { gap: 2px; margin-left: auto; padding-left: 6px; }
  .language-switcher a { width: 25px; height: 25px; font-size: .6rem; }
  .main-nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px; }
  .nav-cta { margin-top: 6px; text-align: center; }
  .hero { min-height: auto; padding: 120px 22px 85px; gap: 65px; }
  h1 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .hero-facts { flex-wrap: wrap; gap: 22px; }
  .hero-art { width: 92%; box-shadow: 10px 10px 0 var(--ink); }
  .section { padding: 88px 22px; }
  .section-heading { display: block; }
  .section-heading > p:last-child { margin-top: 25px; }
  .section-kicker { display: block; }
  .feature-grid, .pathways-grid, .archive-profiles, .launch-panel { grid-template-columns: 1fr; }
  .feature-card { min-height: 380px; }
  .pathway { min-height: 590px; padding: 38px 28px; }
  .pathway > div { max-width: 82%; }
  .pathway img { width: 38%; }
  .archive-profiles { gap: 12px; }
  .launch-panel { padding: 36px 26px; }
  .launch-panel > img { width: min(330px, 85%); margin: 0 auto; }
  .site-footer { grid-template-columns: 1fr; padding: 60px 22px; }
  .site-footer > p { text-align: left; }
  .footer-links, .site-footer small { grid-column: auto; }
  .legal-header { position: relative; top: auto; }
  .legal-header .menu-toggle { display: none; }
  .legal-nav { gap: 10px; }
  .legal-nav a:not(:first-child) { display: none; }
  .legal-hero { padding: 74px 22px 40px; }
  .legal-layout { grid-template-columns: 1fr; gap: 24px; padding: 0 22px 90px; }
  .legal-toc { position: relative; top: auto; }
  .legal-card { padding: 30px 22px; }
  .brand::before { width: 132px; height: 36px; }
  .brand::after { display: none; }
  .archive-intro-honest { grid-template-columns: 1fr; }
}

@media (max-width: 410px) {
  .brand::before { width: 112px; height: 33px; }
  .language-switcher { padding-left: 4px; }
  .language-switcher a { width: 22px; height: 22px; font-size: .56rem; }
}

@media (max-width: 520px) {
  h1 { font-size: clamp(2.85rem, 13.5vw, 4.1rem); }
  .section-heading h2,
  .archive-intro h2,
  .vision-copy h2,
  .launch-panel h2 { font-size: clamp(2.45rem, 11.5vw, 3.35rem); }
  .section-kicker strong { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero-actions, .launch-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .hero-facts { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hero-art { width: 86%; }
  .search-frame { padding: 54px 18px 24px; }
  .search-form { grid-template-columns: 1fr; }
  .feature-card { padding-inline: 25px; }
  .text-link { left: 25px; right: 25px; }
  .pathway > div { max-width: 100%; }
  .pathway img { opacity: .18; width: 52%; }
  .profile-card img { width: 66px; height: 66px; flex-basis: 66px; }
  .definition-panel { padding: 38px 24px; }
  .definition-formula { gap: 8px 10px; }
  .platform-flow { grid-template-columns: 1fr; }
  .platform-flow li { min-height: 0; }
  .then-now { padding: 38px 24px; }
  .universum-teaser { padding-top: 12px; }
  .universum-panel { padding: 48px 24px 40px; }
  .universum-copy h2 { font-size: clamp(2.45rem, 11.5vw, 3.35rem); }
  .universum-copy .button { overflow-wrap: anywhere; }
  .gallery-toolbar { align-items: flex-start; }
  .gallery-toolbar h3 { font-size: 2.35rem; }
  .gallery-controls { margin-top: 5px; }
  .gallery-controls button { width: 40px; height: 40px; }
  .history-gallery { --gallery-visible: 1; grid-auto-columns: 100%; }
  .history-bridge { padding: 42px 24px; }
  .history-bridge h3 { font-size: clamp(2.25rem, 12vw, 3.1rem); overflow-wrap: anywhere; }
  .history-bridge p { overflow-wrap: anywhere; }
  .history-bridge .button { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Schlussregeln der Originalmarke: bewusst am Ende, damit nichts sie überschreibt. */
.footer-brand .footer-wordmark {
  display: block;
  width: 220px;
  height: 58px;
  margin: 0;
  background: url("assets/artopia-wordmark-original.jpg") center center / 100% auto no-repeat;
  filter: invert(1);
}
.footer-brand .footer-slogan {
  display: block;
  margin: 0;
  color: var(--yellow);
  font: 400 1.4rem/1 "Bauhaus 93", "Arial Rounded MT Bold", sans-serif;
  letter-spacing: .01em;
}

/* WordPress-Inhalte außerhalb der festen Startseite */
.wp-site-main { min-height: 70vh; padding: 150px max(5vw, calc((100vw - 1040px) / 2)) 100px; }
.wp-content-card { padding: clamp(28px, 5vw, 58px); border: 3px solid var(--ink); border-radius: 28px; background: var(--white); box-shadow: 10px 10px 0 var(--ink); }
.wp-content-card + .wp-content-card { margin-top: 34px; }
.wp-content-card h1 { margin-bottom: 26px; font-size: clamp(3rem, 7vw, 6.2rem); }
.wp-content-card h2 { margin-top: 42px; font-size: clamp(2rem, 4vw, 3.5rem); }
.wp-content-card h3 { margin-top: 30px; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.wp-content-card a { font-weight: 800; text-underline-offset: 3px; }
.wp-content-card img { height: auto; border-radius: 18px; }
.archive-contact-note { margin-top: 52px; padding: 26px 28px; border: 2px solid var(--ink); border-radius: 20px; background: var(--yellow); box-shadow: 7px 7px 0 var(--ink); }
.archive-contact-note h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.archive-contact-note p { margin: 0; }
.translation-notice { margin: 0 0 30px; padding: 15px 18px; border-left: 6px solid var(--blue); background: #eaf1ff; color: #24211d; font-size: .92rem; font-weight: 700; }
.wp-entry-meta { margin: -12px 0 28px; color: #625d55; font-size: .85rem; font-weight: 800; }
.wp-post-list { display: grid; gap: 28px; }
.wp-pagination { margin-top: 44px; font-weight: 900; }
.wp-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-pagination a, .wp-pagination span { padding: 8px 12px; border: 2px solid var(--ink); border-radius: 10px; background: var(--white); }
.wp-pagination .current { background: var(--yellow); }
.wp-empty { text-align: center; }

@media (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar .site-header.is-scrolled { top: 56px; }
}