/* ─────────────────────────────────────────────────────────────
   Tiny Tunes – Hub (tiny-tunes.de) · gemeinsame Styles
   ───────────────────────────────────────────────────────────── */

/* ════════════ SCHRIFTEN (lokal) ════════════ */
@font-face { font-family: 'RocknRoll One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/rocknroll-one-v16-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/nunito-sans-v19-latin-900.woff2') format('woff2'); }

/* ════════════ FARBEN & BASIS ════════════ */
:root {
  --tt-bg:      #FCF5ED;
  --tt-soft:    #FFF8F2;
  --tt-white:   #FFFFFF;
  --tt-coral:   #FF6B6B;
  --tt-coral2:  #E85555;
  --tt-sun:     #FFD166;
  --tt-sun-ink: #A07000;
  --tt-teal:    #06D6A0;
  --tt-teal-ink:#05936E;
  --tt-navy:    #1A1A2E;
  --tt-ink:     #3D3D50;
  --tt-muted:   #7E7E93;
  --tt-border:  rgba(0,0,0,0.08);
  --tt-radius:  22px;
  --tt-shadow:  0 6px 30px rgba(0,0,0,0.07);
  --tt-font:    'Nunito Sans', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tt-display: 'RocknRoll One', 'Nunito Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--tt-bg); color: var(--tt-ink);
  font-family: var(--tt-font); line-height: 1.6;
  min-height: 100vh; display: flex; flex-direction: column;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tt-coral); outline-offset: 3px; border-radius: 6px; }
.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; }

/* ════════════ KOPFZEILE ════════════ */
/* Kopfzeile bleibt beim Scrollen oben stehen */
.hub-header {
  position: sticky; top: 0; z-index: 50; width: 100%;
  background: rgba(252,245,237,0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.hub-header.is-scrolled {
  background: rgba(255,255,255,0.9);
  border-bottom-color: var(--tt-border);
  box-shadow: 0 6px 24px rgba(26,26,46,0.06);
}
.hub-header-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 1rem 5%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hub-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hub-logo > img { height: 48px; width: auto; }
.hub-logo-text {
  display: none; align-items: center; gap: 0.55rem;
  font-family: var(--tt-display); font-size: 1.35rem; color: var(--tt-navy);
}
.hub-logo-text img { width: 34px; height: 34px; }
.hub-logo-text span { color: var(--tt-coral); }
.hub-logo.no-img > img { display: none; }
.hub-logo.no-img .hub-logo-text { display: inline-flex; }
.hub-actions { display: flex; align-items: center; gap: 0.6rem; }
.hub-contact {
  font-family: inherit; font-weight: 800; font-size: 0.9rem; text-decoration: none;
  color: var(--tt-navy); background: var(--tt-white);
  border: 1.5px solid var(--tt-border); border-radius: 50px;
  padding: 0.55rem 1.15rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.hub-contact:hover { border-color: var(--tt-coral); color: var(--tt-coral2); transform: translateY(-1px); }

/* ════════════ HAUPTBEREICH MIT MUSTER ════════════ */
.tt-portal {
  position: relative; flex: 1; width: 100%; overflow: hidden;
  /* Hintergrundmuster: assets/images/bg-pattern.webp (fehlt es, bleibt Creme)
     Der Creme-Schleier (0.84) lässt das Muster mit 16 % Deckkraft durchscheinen.
     Muster stärker: Wert senken (z. B. 0.80 = 20 %) · dezenter: erhöhen */
  background-image:
    linear-gradient(rgba(252,245,237,0.84), rgba(252,245,237,0.84)),
    url('../images/bg-pattern.webp');
  background-size: auto, 520px;
  background-repeat: repeat;
}
.tt-portal::before {
  content: ''; position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
  width: min(820px, 160vw); height: 820px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,209,102,0.22) 0%, transparent 65%);
}
.tt-portal-note {
  position: absolute; font-family: serif; pointer-events: none; user-select: none;
  animation: ttFloat 7s ease-in-out infinite;
}
.tt-portal-note.n1 { top: 1rem;    right: 7%;  font-size: 6rem;   color: rgba(255,107,107,0.08); }
.tt-portal-note.n2 { top: 12rem;   left: 3%;   font-size: 4.5rem; color: rgba(6,214,160,0.10); animation-delay: 1.2s; }
.tt-portal-note.n3 { top: 52rem;   right: 6%;  font-size: 5rem;   color: rgba(255,209,102,0.28); animation-delay: 2.4s; }
@keyframes ttFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-16px) rotate(6deg); }
}

.tt-portal-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 2.5rem 5% 4.5rem;
  position: relative; z-index: 2;
}

.tt-portal-head { text-align: center; max-width: 660px; margin: 0 auto 3.2rem; }
.tt-portal-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.22);
  color: var(--tt-coral2); padding: 0.38rem 1rem; border-radius: 50px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 1.3rem;
  animation: ttUp 0.6s ease both;
}
.tt-portal-h1 {
  font-family: var(--tt-display); font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  color: var(--tt-navy); line-height: 1.14; margin-bottom: 1.1rem;
  animation: ttUp 0.6s 0.08s ease both;
}
.tt-portal-h1 .accent { color: var(--tt-coral); }
.tt-portal-sub {
  font-size: 1.05rem; color: var(--tt-muted); line-height: 1.8;
  animation: ttUp 0.6s 0.16s ease both;
}

/* ════════════ MODUL-KARTEN ════════════ */
.tt-portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.tt-portal-card {
  --c-main: var(--tt-coral);
  --c-ink:  var(--tt-coral2);
  --c-tint: #FFE9E6;
  --c-glow: rgba(255,107,107,0.22);

  display: flex; flex-direction: column;
  background: var(--tt-white);
  border: 2px solid var(--tt-border);
  border-radius: var(--tt-radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--tt-shadow);
  transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: ttUp 0.65s ease both;
}
.tt-portal-card:nth-child(1) { animation-delay: 0.24s; }
.tt-portal-card:nth-child(2) { animation-delay: 0.34s; }
.tt-portal-card:nth-child(3) { animation-delay: 0.44s; }
.tt-portal-card.is-kurs  { --c-main: var(--tt-sun);  --c-ink: var(--tt-sun-ink);  --c-tint: #FFF1CC; --c-glow: rgba(255,209,102,0.38); }
.tt-portal-card.is-insel { --c-main: var(--tt-teal); --c-ink: var(--tt-teal-ink); --c-tint: #D9F8EE; --c-glow: rgba(6,214,160,0.26); }

.tt-portal-card:hover,
.tt-portal-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--c-main);
  box-shadow: 0 22px 56px var(--c-glow);
  outline: none;
}
.tt-portal-bar { height: 6px; background: var(--c-main); }

/* Bildfläche: Kartenbild hinten, Icon davor */
.tt-portal-visual {
  margin: 1.2rem 1.2rem 0;
  border-radius: 16px;
  aspect-ratio: 2 / 1;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding-top: 2.6rem;
  background-color: var(--c-tint);
}
.tt-portal-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.6s ease;
}
.is-schule .tt-portal-img { background-image: url('../images/card-schule.webp'); }
.is-kurs   .tt-portal-img { background-image: url('../images/card-kurs.webp'); }
.is-insel  .tt-portal-img { background-image: url('../images/card-insel.webp'); }
.tt-portal-card:hover .tt-portal-img { transform: scale(1.06); }
.tt-portal-visual::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 58%, rgba(255,255,255,0.45) 0%, transparent 42%),
    linear-gradient(180deg, rgba(26,26,46,0) 55%, rgba(26,26,46,0.16) 100%);
}

/* Icon im runden Rahmen: assets/icons/icon-*.webp – fehlt es, erscheint das Emoji.
   Das Icon wird rund zugeschnitten und bleibt immer innerhalb des Kreises. */
.tt-portal-icon {
  position: relative; z-index: 2;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--tt-white);
  border: 4px solid var(--c-main);
  box-shadow: 0 8px 24px rgba(26,26,46,0.18);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.tt-portal-icon img {
  width: 100%; height: 100%;
  padding: 6px;
  object-fit: contain;
  border-radius: 50%;
}
.tt-portal-icon .fallback { font-size: 2.7rem; line-height: 1; font-style: normal; }
.tt-portal-icon img + .fallback { display: none; }
.tt-portal-card:hover .tt-portal-icon { transform: scale(1.1) rotate(-6deg); }

.tt-portal-mode {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tt-white); color: var(--c-ink);
  padding: 0.28rem 0.75rem; border-radius: 50px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(26,26,46,0.12);
}

.tt-portal-body { padding: 1.35rem 1.6rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tt-portal-module {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink); margin-bottom: 0.3rem;
}
.tt-portal-title {
  font-family: var(--tt-display); font-weight: 400;
  font-size: 1.55rem; color: var(--tt-navy); line-height: 1.2; margin-bottom: 0.2rem;
}
.tt-portal-for { font-size: 0.86rem; font-weight: 800; color: var(--tt-ink); margin-bottom: 0.7rem; }
.tt-portal-text { font-size: 0.93rem; color: var(--tt-muted); line-height: 1.7; margin-bottom: 1.1rem; }
.tt-portal-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.4rem; flex: 1; }
.tt-portal-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--tt-ink); line-height: 1.5; }
.tt-portal-list li::before {
  content: '✓'; flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.68rem; font-weight: 900;
  background: var(--c-tint); color: var(--c-ink);
  margin-top: 1px;
}
.tt-portal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding-top: 1.05rem; border-top: 1px solid var(--tt-border);
}
.tt-portal-cta { display: block; font-weight: 800; font-size: 0.95rem; color: var(--tt-navy); transition: color 0.2s; }
.tt-portal-card:hover .tt-portal-cta { color: var(--c-ink); }
.tt-portal-url { display: block; font-size: 0.76rem; font-weight: 700; color: var(--tt-muted); margin-top: 2px; }
.tt-portal-arrow {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--c-tint); color: var(--c-ink);
  font-size: 1.15rem; font-weight: 900;
  transition: background 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.tt-portal-card:hover .tt-portal-arrow { background: var(--c-main); color: #fff; transform: translateX(4px); }
.tt-portal-card.is-kurs:hover .tt-portal-arrow { color: var(--tt-navy); }

@keyframes ttUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════ KONTAKT ════════════ */
.hub-kontakt {
  margin-top: 4.5rem; scroll-margin-top: 6.5rem;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: start;
}
.hub-kontakt-intro { padding-top: 0.6rem; }
.hub-eyebrow {
  display: inline-block; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tt-coral2); margin-bottom: 0.6rem;
}
.hub-kontakt-intro h2 {
  font-family: var(--tt-display); font-weight: 400; color: var(--tt-navy);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.2; margin-bottom: 0.9rem;
}
.hub-kontakt-intro p { color: var(--tt-muted); font-size: 0.98rem; line-height: 1.75; margin-bottom: 1.3rem; }
.hub-kontakt-facts { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.hub-kontakt-facts li { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 0.92rem; color: var(--tt-ink); }
.hub-kontakt-facts span {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--tt-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); font-size: 1rem;
}
.hub-kontakt-facts a { color: var(--tt-coral2); text-decoration: none; font-weight: 800; }
.hub-kontakt-facts a:hover { text-decoration: underline; }

.hub-form-card {
  background: var(--tt-white); border: 2px solid var(--tt-border);
  border-radius: var(--tt-radius); box-shadow: var(--tt-shadow);
  padding: 1.8rem 1.8rem 1.6rem; position: relative;
}
.hub-form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  border-radius: calc(var(--tt-radius) - 2px) calc(var(--tt-radius) - 2px) 0 0;
  background: linear-gradient(90deg, var(--tt-coral) 0 33.3%, var(--tt-sun) 33.3% 66.6%, var(--tt-teal) 66.6% 100%);
}
.hub-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.hub-field { display: flex; flex-direction: column; gap: 0.35rem; }
.hub-field.full { grid-column: 1 / -1; }
.hub-field label { font-size: 0.84rem; font-weight: 800; color: var(--tt-navy); }
.hub-field label small { font-weight: 600; color: var(--tt-muted); font-size: 0.78rem; }
.hub-field input, .hub-field select, .hub-field textarea {
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--tt-ink);
  background: var(--tt-soft); border: 1.5px solid var(--tt-border); border-radius: 14px;
  padding: 0.72rem 0.95rem; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.hub-field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E85555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center;
}
.hub-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.hub-field input:focus, .hub-field select:focus, .hub-field textarea:focus {
  outline: none; border-color: var(--tt-coral); background: var(--tt-white);
  box-shadow: 0 0 0 4px rgba(255,107,107,0.14);
}
.hub-field.has-error input, .hub-field.has-error select, .hub-field.has-error textarea { border-color: var(--tt-coral2); background: #FFF5F4; }
.hub-field-error { font-size: 0.8rem; font-weight: 700; color: var(--tt-coral2); }
/* ── Auswahlliste im Tiny-Tunes-Look (ersetzt die Browser-Liste) ── */
.hub-select { position: relative; }
.hub-select.is-enhanced select {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.hub-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--tt-ink); text-align: left;
  background: var(--tt-soft); border: 1.5px solid var(--tt-border); border-radius: 14px;
  padding: 0.72rem 0.95rem; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.hub-select-btn:focus-visible { outline: none; }
.hub-select-btn:hover { border-color: rgba(255,107,107,0.45); }
.hub-select.is-open .hub-select-btn,
.hub-select-btn:focus {
  border-color: var(--tt-coral); background: var(--tt-white);
  box-shadow: 0 0 0 4px rgba(255,107,107,0.14);
}
.hub-select-value { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.hub-select-value.is-placeholder { color: var(--tt-muted); font-weight: 600; }
.hub-select-chevron {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: rgba(255,107,107,0.1);
  transition: transform 0.25s ease, background 0.2s;
}
.hub-select-chevron svg { width: 12px; height: 8px; }
.hub-select.is-open .hub-select-chevron { transform: rotate(180deg); background: rgba(255,107,107,0.18); }
.hub-field.has-error .hub-select-btn { border-color: var(--tt-coral2); background: #FFF5F4; }

.hub-select-list {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--tt-white); border: 1.5px solid var(--tt-border); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(26,26,46,0.14), 0 2px 8px rgba(26,26,46,0.05);
  transform-origin: top center;
  animation: ttDrop 0.18s cubic-bezier(0.34,1.4,0.64,1) both;
}
.hub-select-list[hidden] { display: none; }
.hub-select-list:focus { outline: none; }
@keyframes ttDrop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hub-select-option {
  --o-color: var(--tt-muted); --o-tint: #F2F2F5;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.68rem 0.8rem; border-radius: 12px;
  font-size: 0.95rem; font-weight: 700; color: var(--tt-ink);
  cursor: pointer; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.hub-select [data-key="schule"] { --o-color: var(--tt-coral); --o-tint: #FFE9E6; }
.hub-select [data-key="kurs"]   { --o-color: var(--tt-sun);   --o-tint: #FFF1CC; }
.hub-select [data-key="insel"]  { --o-color: var(--tt-teal);  --o-tint: #D9F8EE; }
.hub-select-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--o-color, var(--tt-muted));
  box-shadow: 0 0 0 3px var(--o-tint, #F2F2F5);
}
.hub-select-option.is-active { background: var(--o-tint); color: var(--tt-navy); }
.hub-select-option[aria-selected="true"] { color: var(--tt-navy); font-weight: 800; }
.hub-select-option[aria-selected="true"]::after {
  content: '✓'; margin-left: auto; font-weight: 900; color: var(--tt-coral2);
}
.hub-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.hub-form-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.3rem;
}
.hub-form-note { font-size: 0.8rem; color: var(--tt-muted); line-height: 1.5; max-width: 34ch; }
.hub-form-note a { color: var(--tt-coral2); font-weight: 800; }
.hub-submit {
  font-family: var(--tt-display); font-size: 1rem; color: #fff; cursor: pointer;
  background: var(--tt-coral); border: none; border-radius: 50px;
  padding: 0.85rem 1.7rem; box-shadow: 0 6px 18px rgba(255,107,107,0.32);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.hub-submit:hover { background: var(--tt-coral2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,107,107,0.38); }

.hub-alert {
  border-radius: 16px; padding: 0.95rem 1.1rem; margin-bottom: 1.2rem;
  font-size: 0.92rem; font-weight: 700; line-height: 1.55;
}
.hub-alert.is-error   { background: #FFF0EE; color: #8A2C25; border: 1.5px solid rgba(232,85,85,0.25); }
.hub-alert.is-warning { background: #FFF6DD; color: #6E5200; border: 1.5px solid rgba(255,209,102,0.5); }
.hub-success { text-align: center; padding: 1.6rem 0.6rem 1rem; }
.hub-success-icon {
  width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center; font-size: 2.1rem;
  background: #D9F8EE; box-shadow: inset 0 0 0 3px var(--tt-teal);
}
.hub-success h3 { font-family: var(--tt-display); font-weight: 400; color: var(--tt-navy); font-size: 1.45rem; margin-bottom: 0.5rem; }
.hub-success p { color: var(--tt-muted); margin-bottom: 1.2rem; }
.hub-success a { color: var(--tt-coral2); font-weight: 800; text-decoration: none; }

/* ════════════ RECHTLICHE SEITEN ════════════ */
.hub-legal { max-width: 860px; margin: 0 auto; padding: 1.5rem 5% 4.5rem; position: relative; z-index: 2; }
.hub-back { display: inline-flex; gap: 0.4rem; font-weight: 800; font-size: 0.9rem; color: var(--tt-coral2); text-decoration: none; margin-bottom: 1.2rem; }
.hub-back:hover { text-decoration: underline; }
.hub-legal h1 { font-family: var(--tt-display); font-weight: 400; color: var(--tt-navy); font-size: clamp(2rem, 4.6vw, 2.8rem); line-height: 1.15; margin-bottom: 0.5rem; }
.hub-legal-lead { color: var(--tt-muted); margin-bottom: 2rem; }
.hub-legal-card {
  background: var(--tt-white); border: 2px solid var(--tt-border); border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow); padding: 0.4rem 2rem;
}
.hub-legal-section { padding: 1.5rem 0; border-bottom: 1px solid var(--tt-border); }
.hub-legal-section:last-child { border-bottom: none; }
.hub-legal-section h2 {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--tt-display); font-weight: 400; font-size: 1.15rem; color: var(--tt-navy); margin-bottom: 0.7rem;
}
.hub-legal-section h2 span {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tt-soft); font-size: 1rem; flex-shrink: 0;
}
.hub-legal-section p, .hub-legal-section li { font-size: 0.94rem; line-height: 1.75; color: var(--tt-ink); }
.hub-legal-section p + p, .hub-legal-section p + ul, .hub-legal-section ul + p { margin-top: 0.6rem; }
.hub-legal-section ul { padding-left: 1.2rem; }
.hub-legal-section a { color: var(--tt-coral2); font-weight: 700; }
.hub-legal-section strong { color: var(--tt-navy); }
.hub-legal-stand { margin-top: 1.2rem; font-size: 0.82rem; color: var(--tt-muted); text-align: right; }

/* ════════════ FUSSZEILE (hell) ════════════ */
.hub-footer {
  position: relative; margin-top: auto;
  background: var(--tt-white); color: var(--tt-muted);
  border-top: 1px solid var(--tt-border);
}
.hub-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--tt-coral) 0 33.3%, var(--tt-sun) 33.3% 66.6%, var(--tt-teal) 66.6% 100%);
}
.hub-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 2rem 5% 1.6rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1.1rem 2rem; align-items: center;
}
.hub-footer-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--tt-display); font-size: 1.2rem; color: var(--tt-navy); text-decoration: none;
}
.hub-footer-brand img { width: 34px; height: 34px; object-fit: contain; }
.hub-footer-brand span { color: var(--tt-coral); }
.hub-footer-modules, .hub-footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; list-style: none; }
.hub-footer-modules { justify-content: flex-end; }
.hub-footer a { text-decoration: none; transition: color 0.2s, background 0.2s; }
.hub-footer-modules a {
  display: inline-block; font-weight: 800; font-size: 0.86rem; color: var(--tt-navy);
  padding: 0.35rem 0.85rem; border-radius: 50px; background: var(--tt-soft);
}
.hub-footer-modules li:nth-child(1) a:hover { background: #FFE9E6; color: var(--tt-coral2); }
.hub-footer-modules li:nth-child(2) a:hover { background: #FFF1CC; color: var(--tt-sun-ink); }
.hub-footer-modules li:nth-child(3) a:hover { background: #D9F8EE; color: var(--tt-teal-ink); }
.hub-footer-bottom {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem;
  padding-top: 1.1rem; border-top: 1px solid var(--tt-border);
  font-size: 0.84rem;
}
.hub-footer-legal { gap: 0.4rem 1.3rem; }
.hub-footer-legal a { color: var(--tt-muted); font-weight: 700; }
.hub-footer-legal a:hover, .hub-footer-legal a[aria-current="page"] { color: var(--tt-coral2); }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 960px) {
  .tt-portal-grid { grid-template-columns: 1fr 1fr; }
  .tt-portal-card.is-insel { grid-column: 1 / -1; }
  .tt-portal-card.is-insel .tt-portal-visual { aspect-ratio: 3 / 1; }
  .hub-kontakt { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 640px) {
  .hub-header-inner { padding: 0.75rem 16px; }
  .hub-logo > img { height: 40px; }
  .hub-contact { padding: 0.5rem 0.95rem; font-size: 0.84rem; }
  .tt-portal-inner { padding: 1.6rem 16px 3.2rem; }
  .tt-portal-head { margin-bottom: 2.2rem; }
  .tt-portal-grid { grid-template-columns: 1fr; }
  .tt-portal-card.is-insel .tt-portal-visual { aspect-ratio: 2 / 1; }
  .tt-portal-body { padding: 1.2rem 1.25rem 1.3rem; }
  .tt-portal-note { display: none; }
  .hub-kontakt { margin-top: 3.2rem; }
  .hub-form-card { padding: 1.5rem 1.15rem 1.3rem; }
  .hub-form-grid { grid-template-columns: 1fr; }
  .hub-form-foot { flex-direction: column; align-items: stretch; }
  .hub-submit { width: 100%; }
  .hub-legal { padding: 1rem 16px 3.2rem; }
  .hub-legal-card { padding: 0.2rem 1.15rem; }
  .hub-footer-inner { grid-template-columns: 1fr; padding: 1.8rem 16px 1.5rem; }
  .hub-footer-modules { justify-content: flex-start; }
  .hub-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}