/* --- from agb.html --- */
/* ---- PALETTE & THEME ---- */
    :root {
      /* Light theme */
      --site-bg: #FEF8FF;
      --site-surface: #F9EAFD;
      --site-text: #141015;
      --site-muted: #413644;
      --site-border: #E8D7ED;
      --site-primary: #CF37F1;
      --site-on-primary: #000000;
      --site-secondary: #8A7658;
      --site-on-secondary: #000000;
      --site-accent: #568689;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      /* Band colors */
      --A: #0E2A47;
      --B: #F2EDE4;
      --C: #D8452F;
      --D: #12395E;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #150619;
        --site-surface: #231128;
        --site-text: #E7E3E8;
        --site-muted: #BAABBD;
        --site-border: #362839;
        --site-primary: #D88DEB;
        --site-on-primary: #000000;
        --site-secondary: #C1AB8A;
        --site-on-secondary: #000000;
        --site-accent: #A5E3E6;
        --site-on-accent: #000000;
      }
    }
    /* Compatibility aliases */
    :root {
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
    }

    /* ---- TYPOGRAPHY ---- */
    body {
      font-family: 'Playfair Display', 'Times New Roman', serif;
      font-weight: 400;
      color: var(--site-text);
      background: var(--site-bg);
      margin: 0;
      line-height: 1.6;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Playfair Display', serif;
      font-weight: 800;
      margin-top: 0;
      color: inherit;
    }
    p { margin-top: 0; }

    /* ---- LAYOUT SYSTEM ---- */
    .bar {
      position: sticky;
      top: 0;
      height: 76px;
      display: flex;
      align-items: center;
      gap: 32px;
      padding: 0 40px;
      background: var(--A);
      z-index: 50;
      color: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .bar .logo {
      font-size: 1.4rem;
      font-weight: 600;
      color: #fff;
      text-decoration: none;
      white-space: nowrap;
    }
    .bar nav {
      display: flex;
      gap: 28px;
      white-space: nowrap;
      font-size: 0.9rem;
    }
    .bar nav a {
      color: rgba(255,255,255,0.85);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
    .bar nav a:hover { color: #fff; }
    .bar .cta-header {
      margin-left: auto;
      background: var(--C);
      color: #fff;
      padding: 10px 24px;
      border-radius: 20px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9rem;
      transition: transform 0.2s;
    }
    .bar .cta-header:hover {
      transform: translateY(-2px);
    }
    /* Hamburger */
    .bar .menu-toggle {
      display: none;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.5rem;
      cursor: pointer;
    }
    .band {
      width: 100%;
      padding: 96px 24px;
      box-sizing: border-box;
    }
    .band>.wrap {
      max-width: 1200px;
      margin: 0 auto;
    }
    .band.a { background: var(--A); color: #fff; }
    .band.b { background: var(--B); color: #12233A; }
    .band.c { background: var(--C); color: #fff; }
    .band.d { background: var(--D); color: #fff; }
    .split {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 56px;
      align-items: center;
    }
    .tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      grid-auto-rows: minmax(180px, auto);
    }
    .tiles.tiles-2 {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .tiles.tiles-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .rows {
      display: grid;
      gap: 0;
    }
    .rows>div {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 32px;
      padding: 32px 0;
      border-top: 1px solid currentColor;
    }
    .quote-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      font-size: 1.4rem;
      line-height: 1.4;
      font-style: italic;
    }
    .pricing-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      align-items: start;
    }
    .pricing-highlight {
      background: var(--A);
      color: #fff;
      padding: 32px;
      border-radius: 20px;
    }
    .form-stacked {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    .form-stacked input,
    .form-stacked textarea,
    .form-stacked select {
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid #ccc;
      font-family: inherit;
      font-size: 1rem;
    }
    .form-stacked button {
      background: var(--C);
      color: #fff;
      border: none;
      padding: 14px 28px;
      border-radius: 20px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .form-stacked button:hover { transform: translateY(-4px); }
    .testimonial {
      padding: 16px 0;
      border-top: 1px solid rgba(255,255,255,0.3);
    }
    .glass-card {
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      transition: transform 0.3s;
    }
    .glass-card:hover {
      transform: translateY(-4px);
    }
    .icon-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 12px;
      background: rgba(255,255,255,0.15);
      margin-bottom: 16px;
      font-size: 1.8rem;
    }

    @media (max-width: 820px) {
      .bar {
        height: 64px;
        padding: 0 16px;
      }
      .bar nav { display: none; }
      .bar .menu-toggle { display: block; }
      .split,
      .tiles,
      .tiles-2,
      .tiles-4,
      .rows>div,
      .quote-grid,
      .pricing-3 {
        grid-template-columns: 1fr;
      }
      .band { padding: 64px 20px; }
      .mobile-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--A);
        flex-direction: column;
        padding: 16px;
        gap: 16px;
      }
      .mobile-nav.active { display: flex; }
      .bar .cta-header { display: none; }
    }

/* --- from agb.html --- */
.agbPage {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.agbPage .band {
			width: 100%;
			padding: 96px 24px;
			box-sizing: border-box;
		}

		.agbPage .bandInner {
			max-width: 1200px;
			margin: 0 auto;
		}

		.agbPage .bandA {
			background: var(--A);
			color: #fff;
		}

		.agbPage .bandB {
			background: var(--B);
			color: #12233A;
		}

		.agbPage .bandC {
			background: var(--C);
			color: #fff;
		}

		.agbPage .bandD {
			background: var(--D);
			color: #fff;
		}

		.agbPage h1,
		.agbPage h2,
		.agbPage h3 {
			font-weight: 800;
			letter-spacing: -0.02em;
		}

		.agbPage h1 {
			max-width: 680px;
			margin-bottom: 24px;
			font-size: clamp(2.6rem, 6vw, 5.4rem);
			line-height: 1.03;
		}

		.agbPage h2 {
			margin-bottom: 24px;
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.08;
		}

		.agbPage h3 {
			margin-bottom: 10px;
			font-size: 1.35rem;
		}

		.agbPage p {
			max-width: 720px;
			font-size: 1.05rem;
		}

		.agbPage .heroGrid {
			display: grid;
			grid-template-columns: 1.08fr .92fr;
			gap: 64px;
			align-items: center;
		}

		.agbPage .eyebrow {
			margin-bottom: 18px;
			color: var(--color-primary);
			font-size: .78rem;
			font-weight: 800;
			letter-spacing: .16em;
			text-transform: uppercase;
		}

		.agbPage .heroText p {
			max-width: 620px;
			color: rgba(255,255,255,.78);
			font-size: 1.18rem;
		}

		.agbPage .heroActions {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-top: 32px;
		}

		.agbPage .actionPrimary,
		.agbPage .actionSecondary {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 13px 21px;
			border-radius: 20px;
			font-weight: 700;
			text-decoration: none;
			transition: transform .2s ease;
		}

		.agbPage .actionPrimary {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.agbPage .actionSecondary {
			border: 1px solid rgba(255,255,255,.36);
			color: #fff;
		}

		.agbPage .actionPrimary:hover,
		.agbPage .actionSecondary:hover {
			transform: translateY(-4px);
		}

		.agbPage .heroImage {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 20px;
			border: 1px solid rgba(255,255,255,.24);
			box-shadow: 0 18px 50px rgba(0,0,0,.28);
		}

		.agbPage .introLine {
			max-width: 760px;
			margin-bottom: 46px;
		}

		.agbPage .featureGrid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 42px;
		}

		.agbPage .featureItem {
			padding-top: 22px;
			border-top: 4px solid var(--C);
		}

		.agbPage .iconBox {
			width: 52px;
			height: 52px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 18px;
			border-radius: 12px;
			background: rgba(86,134,137,.18);
			color: var(--color-accent);
			font-size: 1.25rem;
		}

		.agbPage .featureItem p,
		.agbPage .legalBlock p,
		.agbPage .legalBlock li {
			color: inherit;
			opacity: .82;
		}

		.agbPage .legalRows {
			display: grid;
			gap: 0;
		}

		.agbPage .legalRow {
			display: grid;
			grid-template-columns: 140px 1fr 1fr;
			gap: 30px;
			padding: 30px 0;
			border-top: 1px solid currentColor;
		}

		.agbPage .legalNumber {
			font-size: 1.65rem;
			font-weight: 800;
			color: var(--color-primary);
		}

		.agbPage .legalRow p {
			margin-bottom: 0;
		}

		.agbPage .splitReverse {
			display: grid;
			grid-template-columns: .86fr 1.14fr;
			gap: 68px;
			align-items: center;
		}

		.agbPage .documentPanel {
			padding: 34px;
			border: 1px solid rgba(255,255,255,.22);
			border-radius: 20px;
			background: rgba(255,255,255,.07);
			backdrop-filter: blur(12px);
		}

		.agbPage .documentPanel dl {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 22px;
			margin: 0;
		}

		.agbPage .documentPanel dt {
			margin-bottom: 5px;
			color: var(--color-accent);
			font-size: .8rem;
			font-weight: 800;
			letter-spacing: .1em;
			text-transform: uppercase;
		}

		.agbPage .documentPanel dd {
			margin: 0;
			font-size: 1.08rem;
		}

		.agbPage .topicGrid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 26px;
		}

		.agbPage .topicItem {
			padding: 24px 0 0;
			border-top: 2px solid var(--C);
		}

		.agbPage .topicItem p {
			font-size: .98rem;
		}

		.agbPage .noticeGrid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 54px;
			align-items: start;
		}

		.agbPage .noticeGrid blockquote {
			margin: 0;
			font-size: clamp(1.6rem, 3vw, 2.55rem);
			line-height: 1.25;
			font-style: italic;
		}

		.agbPage .noticeGrid cite {
			display: block;
			margin-top: 22px;
			font-size: .95rem;
			font-style: normal;
			opacity: .75;
		}

		.agbPage .pricingGrid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 34px;
			align-items: start;
		}

		.agbPage .priceItem {
			padding-top: 20px;
			border-top: 2px solid var(--C);
		}

		.agbPage .priceItem p {
			margin-bottom: 0;
		}

		.agbPage .priceFeatured {
			padding: 32px;
			border-radius: 20px;
			background: var(--A);
			color: #fff;
		}

		.agbPage .priceFeatured .iconBox {
			background: rgba(216,141,235,.18);
			color: var(--color-primary);
		}

		.agbPage .contactGrid {
			display: grid;
			grid-template-columns: .85fr 1.15fr;
			gap: 70px;
			align-items: start;
		}

		.agbPage .contactCopy p {
			color: rgba(255,255,255,.82);
		}

		.agbPage .contactDetails {
			margin-top: 30px;
			padding-left: 20px;
			border-left: 2px solid rgba(255,255,255,.48);
		}

		.agbPage .contactDetails a {
			color: #fff;
			text-decoration: none;
		}

		.agbPage .formStack {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		.agbPage .formStack label {
			font-size: .9rem;
			font-weight: 700;
		}

		.agbPage .formStack input,
		.agbPage .formStack textarea,
		.agbPage .formStack select {
			width: 100%;
			box-sizing: border-box;
			margin-top: 7px;
			padding: 14px 16px;
			border: 1px solid rgba(255,255,255,.42);
			border-radius: 12px;
			background: rgba(255,255,255,.1);
			color: #fff;
			font: inherit;
		}

		.agbPage .formStack textarea {
			min-height: 132px;
			resize: vertical;
		}

		.agbPage .formStack option {
			color: var(--color-text);
			background: var(--color-surface);
		}

		.agbPage .formStack button {
			align-self: flex-start;
			padding: 14px 24px;
			border: 0;
			border-radius: 20px;
			background: var(--color-primary);
			color: var(--color-on-primary);
			font: inherit;
			font-weight: 800;
			cursor: pointer;
			transition: transform .2s ease;
		}

		.agbPage .formStack button:hover {
			transform: translateY(-4px);
		}

		@media (max-width: 820px) {
			.agbPage .band {
				padding: 64px 20px;
			}

			.agbPage .heroGrid,
			.agbPage .featureGrid,
			.agbPage .legalRow,
			.agbPage .splitReverse,
			.agbPage .topicGrid,
			.agbPage .noticeGrid,
			.agbPage .pricingGrid,
			.agbPage .contactGrid {
				grid-template-columns: 1fr;
			}

			.agbPage .heroGrid,
			.agbPage .splitReverse,
			.agbPage .contactGrid {
				gap: 38px;
			}

			.agbPage .legalRow {
				gap: 8px;
			}

			.agbPage .documentPanel dl {
				grid-template-columns: 1fr;
			}

			.agbPage .heroActions {
				flex-direction: column;
				align-items: flex-start;
			}
		}

/* --- from datenschutz.html --- */
.privacyPage {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.privacyBand {
			width: 100%;
			padding: 96px 24px;
			box-sizing: border-box;
		}

		.privacyWrap {
			max-width: 1200px;
			margin: 0 auto;
		}

		.bandA {
			background: var(--A);
			color: #FFFFFF;
		}

		.bandB {
			background: var(--B);
			color: #12233A;
		}

		.bandC {
			background: var(--C);
			color: #FFFFFF;
		}

		.bandD {
			background: var(--D);
			color: #FFFFFF;
		}

		.heroGrid {
			display: grid;
			grid-template-columns: 1.1fr .9fr;
			gap: 56px;
			align-items: center;
		}

		.heroCopy {
			max-width: 650px;
		}

		.eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 20px;
			color: var(--color-primary);
			font-size: .82rem;
			font-weight: 600;
			letter-spacing: .12em;
			text-transform: uppercase;
		}

		.heroTitle {
			margin-bottom: 24px;
			font-size: clamp(2.6rem, 6vw, 5.5rem);
			line-height: 1.02;
			letter-spacing: -.04em;
		}

		.heroText {
			max-width: 580px;
			margin-bottom: 32px;
			color: rgba(255,255,255,.78);
			font-size: 1.15rem;
		}

		.actionRow {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
		}

		.actionButton {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 13px 22px;
			border-radius: 20px;
			background: var(--color-primary);
			color: var(--color-on-primary);
			text-decoration: none;
			font-weight: 600;
			transition: transform .2s ease;
		}

		.actionButton:hover {
			transform: translateY(-4px);
		}

		.actionButton.alt {
			background: transparent;
			color: #FFFFFF;
			border: 1px solid rgba(255,255,255,.4);
		}

		.imageFrame {
			position: relative;
			overflow: hidden;
			border-radius: 20px;
			border: 1px solid rgba(255,255,255,.22);
		}

		.imageFrame img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 4 / 3;
			object-fit: cover;
			filter: saturate(.78) contrast(1.08);
		}

		.imageCaption {
			position: absolute;
			right: 18px;
			bottom: 18px;
			left: 18px;
			padding: 13px 16px;
			border-radius: 12px;
			background: rgba(14,42,71,.82);
			color: #FFFFFF;
			font-size: .9rem;
		}

		.sectionHeading {
			max-width: 700px;
			margin-bottom: 48px;
		}

		.sectionHeading h2 {
			margin-bottom: 14px;
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.08;
		}

		.sectionHeading p {
			max-width: 650px;
			margin-bottom: 0;
			color: var(--color-muted);
			font-size: 1.08rem;
		}

		.featureGrid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;
		}

		.featureItem {
			min-height: 180px;
			padding-top: 24px;
			border-top: 4px solid var(--C);
		}

		.iconBox {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 52px;
			margin-bottom: 20px;
			border-radius: 12px;
			background: rgba(86,134,137,.16);
			color: var(--color-accent);
			font-size: 1.35rem;
		}

		.featureItem h3,
		.functionRow h3,
		.areaItem h3 {
			margin-bottom: 10px;
			font-size: 1.35rem;
		}

		.featureItem p,
		.functionRow p,
		.areaItem p {
			margin-bottom: 0;
			color: var(--color-muted);
		}

		.functionList {
			display: grid;
			gap: 0;
		}

		.functionRow {
			display: grid;
			grid-template-columns: 120px 1fr 1.2fr;
			gap: 32px;
			padding: 32px 0;
			border-top: 1px solid rgba(255,255,255,.38);
		}

		.functionNumber {
			color: #FFD3CB;
			font-size: 1.4rem;
			font-weight: 800;
		}

		.functionRow p {
			color: rgba(255,255,255,.82);
		}

		.textSplit {
			display: grid;
			grid-template-columns: .85fr 1.15fr;
			gap: 72px;
			align-items: start;
		}

		.textSplit .sectionHeading {
			position: sticky;
			top: 110px;
			margin-bottom: 0;
		}

		.longCopy {
			font-size: 1.08rem;
		}

		.longCopy p {
			margin-bottom: 22px;
			color: rgba(255,255,255,.82);
		}

		.longCopy p:last-child {
			margin-bottom: 0;
		}

		.areaGrid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 40px;
		}

		.areaItem {
			padding-top: 18px;
			border-top: 1px solid rgba(18,35,58,.4);
		}

		.quoteGrid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
		}

		.quoteBlock {
			margin: 0;
			font-size: clamp(1.4rem, 2.5vw, 2.15rem);
			line-height: 1.35;
			font-style: italic;
		}

		.quoteBlock cite {
			display: block;
			margin-top: 24px;
			color: rgba(255,255,255,.68);
			font-size: .95rem;
			font-style: normal;
		}

		.contactGrid {
			display: grid;
			grid-template-columns: .8fr 1.2fr;
			gap: 72px;
			align-items: start;
		}

		.contactGrid .sectionHeading {
			margin-bottom: 0;
		}

		.contactGrid .sectionHeading p {
			color: rgba(255,255,255,.8);
		}

		.contactDetails {
			margin-top: 30px;
			color: rgba(255,255,255,.82);
		}

		.contactDetails a {
			color: #FFFFFF;
			text-decoration: underline;
			text-underline-offset: 4px;
		}

		.infoPanel {
			padding: 28px;
			border-radius: 20px;
			background: rgba(255,255,255,.08);
			color: #FFFFFF;
			backdrop-filter: blur(12px);
		}

		.infoPanel h3 {
			margin-bottom: 16px;
			font-size: 1.45rem;
		}

		.infoPanel p {
			margin-bottom: 12px;
			color: rgba(255,255,255,.8);
		}

		.infoPanel p:last-child {
			margin-bottom: 0;
		}

		@media (max-width: 820px) {
			.privacyBand {
				padding: 64px 20px;
			}

			.heroGrid,
			.featureGrid,
			.functionRow,
			.textSplit,
			.areaGrid,
			.quoteGrid,
			.contactGrid {
				grid-template-columns: 1fr;
			}

			.functionRow {
				gap: 12px;
			}

			.textSplit .sectionHeading {
				position: static;
			}

			.heroTitle {
				font-size: clamp(2.7rem, 13vw, 4.4rem);
			}
		}

/* --- from kontakt.html --- */
.kontaktBand {
      width: 100%;
      box-sizing: border-box;
      padding: 96px 24px;
    }

    .kontaktBand > .kontaktWrap {
      max-width: 1200px;
      margin: 0 auto;
    }

    .kontaktBand.a {
      background: var(--A);
      color: #fff;
    }

    .kontaktBand.b {
      background: var(--B);
      color: var(--color-text);
    }

    .kontaktBand.c {
      background: var(--C);
      color: #fff;
    }

    .kontaktBand.d {
      background: var(--D);
      color: #fff;
    }

    .kontaktHeroGrid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 64px;
      align-items: center;
    }

    .kontaktHeroCopy h1 {
      max-width: 680px;
      margin-bottom: 24px;
      font-size: clamp(2.8rem, 6vw, 5.8rem);
      line-height: .98;
      letter-spacing: -.04em;
    }

    .kontaktHeroCopy p {
      max-width: 600px;
      margin-bottom: 32px;
      color: rgba(255,255,255,.78);
      font-size: 1.16rem;
    }

    .kontaktActions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .kontaktButton {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 20px;
      text-decoration: none;
      font-weight: 700;
      transition: transform .2s ease;
    }

    .kontaktButton:hover {
      transform: translateY(-4px);
    }

    .kontaktButton.primary {
      background: var(--color-primary);
      color: var(--color-on-primary);
    }

    .kontaktButton.outline {
      border: 1px solid rgba(255,255,255,.45);
      color: #fff;
    }

    .kontaktImageFrame {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      min-height: 360px;
      background: rgba(255,255,255,.08);
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
    }

    .kontaktImageFrame img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 360px;
      object-fit: cover;
      opacity: .72;
    }

    .kontaktImageFrame::after {
      position: absolute;
      inset: 0;
      content: '';
      background: linear-gradient(135deg, rgba(14,42,71,.18), rgba(14,42,71,.82));
    }

    .kontaktImageCaption {
      position: absolute;
      z-index: 1;
      right: 24px;
      bottom: 22px;
      left: 24px;
      color: #fff;
    }

    .kontaktImageCaption strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.3rem;
    }

    .kontaktEyebrow {
      margin-bottom: 16px;
      color: var(--color-primary);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .kontaktBand h2 {
      margin-bottom: 18px;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.04;
      letter-spacing: -.03em;
    }

    .kontaktIntro {
      max-width: 650px;
      margin-bottom: 42px;
      color: var(--color-muted);
      font-size: 1.05rem;
    }

    .kontaktInfoLayout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 64px;
      align-items: start;
    }

    .kontaktInfoList {
      display: grid;
      gap: 22px;
    }

    .kontaktInfoItem {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: start;
    }

    .kontaktIcon {
      display: inline-flex;
      width: 52px;
      height: 52px;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(86,134,137,.16);
      color: var(--color-accent);
      font-size: 1.2rem;
    }

    .kontaktInfoItem strong {
      display: block;
      margin-bottom: 3px;
      font-size: 1.08rem;
    }

    .kontaktInfoItem a {
      color: inherit;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    .kontaktMap {
      overflow: hidden;
      border: 1px solid var(--color-border);
      border-radius: 20px;
      background: rgba(255,255,255,.3);
    }

    .kontaktMap img {
      display: block;
      width: 100%;
      height: 330px;
      object-fit: cover;
      filter: saturate(.7);
    }

    .kontaktMap figcaption {
      padding: 16px 20px;
      color: var(--color-muted);
      font-size: .92rem;
    }

    .kontaktFormLayout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 64px;
      align-items: start;
    }

    .kontaktFormIntro {
      padding-top: 8px;
    }

    .kontaktFormIntro p {
      max-width: 390px;
      color: rgba(255,255,255,.8);
      font-size: 1.08rem;
    }

    .kontaktForm {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 28px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 20px;
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
    }

    .kontaktField {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .kontaktField.full {
      grid-column: 1 / -1;
    }

    .kontaktField label {
      font-size: .88rem;
      font-weight: 700;
    }

    .kontaktField input,
    .kontaktField select,
    .kontaktField textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 13px 14px;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 12px;
      background: rgba(0,0,0,.16);
      color: #fff;
      font: inherit;
    }

    .kontaktField input::placeholder,
    .kontaktField textarea::placeholder {
      color: rgba(255,255,255,.58);
    }

    .kontaktField select option {
      color: var(--color-text);
      background: var(--color-surface);
    }

    .kontaktField textarea {
      min-height: 140px;
      resize: vertical;
    }

    .kontaktForm button {
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: 4px;
      padding: 14px 24px;
      border: 0;
      border-radius: 20px;
      background: var(--color-primary);
      color: var(--color-on-primary);
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      transition: transform .2s ease;
    }

    .kontaktForm button:hover {
      transform: translateY(-4px);
    }

    .kontaktProcess {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 32px;
      padding: 28px 0;
      border-top: 1px solid rgba(255,255,255,.32);
    }

    .kontaktProcess:last-child {
      border-bottom: 1px solid rgba(255,255,255,.32);
    }

    .kontaktProcessNumber {
      color: var(--color-primary);
      font-size: 2rem;
      font-weight: 800;
    }

    .kontaktProcess h3,
    .kontaktFaq h3 {
      margin-bottom: 7px;
      font-size: 1.3rem;
    }

    .kontaktProcess p {
      margin: 0;
      color: rgba(255,255,255,.74);
    }

    .kontaktFaqGrid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 32px;
    }

    .kontaktFaq {
      border-top: 4px solid var(--C);
      padding-top: 22px;
    }

    .kontaktFaq p {
      color: var(--color-muted);
    }

    .kontaktFaq details {
      margin-top: 18px;
    }

    .kontaktFaq summary {
      cursor: pointer;
      font-weight: 700;
    }

    .kontaktFaq summary::marker {
      color: var(--color-primary);
    }

    .kontaktSupportGrid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 64px;
      align-items: center;
    }

    .kontaktSupportPanel {
      padding-left: 28px;
      border-left: 4px solid var(--color-primary);
    }

    .kontaktSupportPanel p {
      max-width: 620px;
      color: rgba(255,255,255,.78);
      font-size: 1.12rem;
    }

    .kontaktSupportStats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }

    .kontaktStat {
      padding: 22px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 20px;
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(12px);
      transition: transform .2s ease;
    }

    .kontaktStat:hover {
      transform: translateY(-4px);
    }

    .kontaktStat strong {
      display: block;
      margin-bottom: 5px;
      color: var(--color-primary);
      font-size: 2rem;
    }

    .kontaktStat span {
      color: rgba(255,255,255,.75);
    }

    .kontaktCta {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: center;
    }

    .kontaktCta p {
      max-width: 650px;
      margin: 0;
      color: rgba(255,255,255,.78);
      font-size: 1.08rem;
    }

    .kontaktCta .kontaktButton {
      white-space: nowrap;
    }

    .kontaktClosing {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: end;
    }

    .kontaktClosing p {
      max-width: 580px;
      color: rgba(255,255,255,.76);
      font-size: 1.08rem;
    }

    .kontaktClosingAddress {
      justify-self: end;
      max-width: 320px;
      color: rgba(255,255,255,.76);
    }

    @media (max-width: 820px) {
      .kontaktBand {
        padding: 64px 20px;
      }

      .kontaktHeroGrid,
      .kontaktInfoLayout,
      .kontaktFormLayout,
      .kontaktSupportGrid,
      .kontaktClosing,
      .kontaktCta {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .kontaktHeroCopy h1 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
      }

      .kontaktImageFrame,
      .kontaktImageFrame img {
        min-height: 280px;
      }

      .kontaktFaqGrid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .kontaktProcess {
        grid-template-columns: 58px 1fr;
        gap: 16px;
      }

      .kontaktProcess p {
        grid-column: 2;
      }

      .kontaktClosingAddress {
        justify-self: start;
      }
    }

    @media (max-width: 560px) {
      .kontaktForm {
        grid-template-columns: 1fr;
        padding: 20px;
      }

      .kontaktField.full,
      .kontaktForm button {
        grid-column: auto;
      }

      .kontaktSupportStats {
        grid-template-columns: 1fr;
      }
    }

/* --- from loesungen.html --- */
.losungenMain {
			overflow: hidden;
		}

		.losungenMain .band {
			width: 100%;
			box-sizing: border-box;
			padding: 96px 24px;
		}

		.losungenMain .band > .wrap {
			max-width: 1200px;
			margin: 0 auto;
		}

		.losungenMain .band.a {
			background: var(--A);
			color: #fff;
		}

		.losungenMain .band.b {
			background: var(--B);
			color: #12233A;
		}

		.losungenMain .band.c {
			background: var(--C);
			color: #fff;
		}

		.losungenMain .band.d {
			background: var(--D);
			color: #fff;
		}

		.losungenMain h1,
		.losungenMain h2,
		.losungenMain h3 {
			font-weight: 800;
			letter-spacing: -0.025em;
		}

		.losungenMain h1 {
			max-width: 700px;
			margin-bottom: 22px;
			font-size: clamp(2.8rem, 6vw, 5.8rem);
			line-height: 0.98;
		}

		.losungenMain h2 {
			margin-bottom: 42px;
			font-size: clamp(2rem, 4vw, 3.5rem);
			line-height: 1.05;
		}

		.losungenMain h3 {
			margin-bottom: 12px;
			font-size: 1.35rem;
			line-height: 1.2;
		}

		.losungenMain p {
			max-width: 650px;
			margin-bottom: 18px;
			font-size: 1.06rem;
		}

		.losungenMain .eyebrow {
			margin-bottom: 18px;
			color: var(--site-accent);
			font-size: 0.78rem;
			font-weight: 600;
			letter-spacing: 0.18em;
			text-transform: uppercase;
		}

		.losungenMain .heroGrid {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 56px;
			align-items: center;
		}

		.losungenMain .heroCopy {
			padding: 12px 0;
		}

		.losungenMain .heroLead {
			max-width: 610px;
			margin-bottom: 30px;
			color: rgba(255, 255, 255, 0.82);
			font-size: 1.25rem;
		}

		.losungenMain .buttonRow {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			align-items: center;
		}

		.losungenMain .button {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 14px 24px;
			border: 1px solid transparent;
			border-radius: 20px;
			font-size: 0.95rem;
			font-weight: 600;
			text-decoration: none;
			transition: transform 0.2s ease, background 0.2s ease;
		}

		.losungenMain .button:hover {
			transform: translateY(-4px);
		}

		.losungenMain .buttonPrimary {
			background: var(--color-accent);
			color: var(--color-on-accent);
		}

		.losungenMain .buttonQuiet {
			border-color: rgba(255, 255, 255, 0.35);
			color: #fff;
		}

		.losungenMain .heroVisual {
			position: relative;
			padding: 14px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.08);
			backdrop-filter: blur(12px);
			transform: rotate(2deg);
		}

		.losungenMain .heroVisual img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 12px;
			object-fit: cover;
		}

		.losungenMain .heroTag {
			position: absolute;
			right: 28px;
			bottom: 28px;
			padding: 12px 16px;
			border-radius: 12px;
			background: var(--color-primary);
			color: var(--color-on-primary);
			font-size: 0.82rem;
			font-weight: 600;
		}

		.losungenMain .tileGrid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 34px;
		}

		.losungenMain .tile {
			min-height: 220px;
			padding-top: 22px;
			border-top: 4px solid var(--C);
			transition: transform 0.25s ease;
		}

		.losungenMain .tile:hover {
			transform: translateY(-4px);
		}

		.losungenMain .iconBox {
			display: inline-flex;
			width: 54px;
			height: 54px;
			margin-bottom: 22px;
			align-items: center;
			justify-content: center;
			border-radius: 12px;
			background: rgba(86, 134, 137, 0.16);
			color: var(--color-accent);
			font-size: 1.35rem;
		}

		.losungenMain .tile p,
		.losungenMain .functionRow p {
			color: inherit;
			opacity: 0.78;
			font-size: 0.98rem;
		}

		.losungenMain .rows {
			display: grid;
			gap: 0;
		}

		.losungenMain .functionRow {
			display: grid;
			grid-template-columns: 120px 1fr 1.2fr;
			gap: 32px;
			padding: 30px 0;
			border-top: 1px solid rgba(255, 255, 255, 0.35);
		}

		.losungenMain .functionRow:last-child {
			border-bottom: 1px solid rgba(255, 255, 255, 0.35);
		}

		.losungenMain .functionNumber {
			color: var(--color-primary);
			font-size: 1.4rem;
			font-weight: 800;
		}

		.losungenMain .functionRow h3 {
			margin: 0;
		}

		.losungenMain .signalGrid {
			display: grid;
			grid-template-columns: 0.8fr 1.2fr;
			gap: 80px;
			align-items: start;
		}

		.losungenMain .signalMark {
			padding: 34px;
			border-left: 8px solid var(--C);
			background: rgba(255, 255, 255, 0.07);
		}

		.losungenMain .signalMark strong {
			display: block;
			margin-bottom: 12px;
			font-size: clamp(3rem, 7vw, 6.5rem);
			line-height: 0.85;
		}

		.losungenMain .signalText h2 {
			margin-bottom: 24px;
		}

		.losungenMain .signalText p {
			color: rgba(255, 255, 255, 0.82);
		}

		.losungenMain .processGrid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 42px;
		}

		.losungenMain .processItem {
			padding-right: 24px;
			border-right: 1px solid rgba(18, 35, 58, 0.22);
		}

		.losungenMain .processItem:last-child {
			border-right: 0;
		}

		.losungenMain .processItem span {
			display: block;
			margin-bottom: 20px;
			color: var(--C);
			font-size: 2.4rem;
			font-weight: 800;
		}

		.losungenMain .processItem p {
			font-size: 0.98rem;
		}

		.losungenMain .platformGrid {
			display: grid;
			grid-template-columns: 0.7fr 1.3fr;
			gap: 64px;
			align-items: center;
		}

		.losungenMain .platformIntro {
			position: sticky;
			top: 110px;
		}

		.losungenMain .platformIntro h2 {
			margin-bottom: 18px;
		}

		.losungenMain .platformRows {
			display: grid;
			gap: 0;
		}

		.losungenMain .platformRow {
			display: grid;
			grid-template-columns: 64px 1fr;
			gap: 24px;
			padding: 25px 0;
			border-top: 1px solid rgba(255, 255, 255, 0.3);
		}

		.losungenMain .platformRow:last-child {
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
		}

		.losungenMain .platformRow strong {
			color: var(--color-primary);
			font-size: 1.1rem;
		}

		.losungenMain .platformRow p {
			margin: 0;
			color: rgba(255, 255, 255, 0.8);
		}

		.losungenMain .contactGrid {
			display: grid;
			grid-template-columns: 0.8fr 1.2fr;
			gap: 72px;
			align-items: start;
		}

		.losungenMain .contactIntro h2 {
			margin-bottom: 20px;
		}

		.losungenMain .contactIntro p {
			color: rgba(255, 255, 255, 0.82);
		}

		.losungenMain .contactDetails {
			margin-top: 34px;
			color: rgba(255, 255, 255, 0.9);
			font-size: 0.95rem;
		}

		.losungenMain .contactDetails div {
			display: flex;
			gap: 12px;
			margin-bottom: 12px;
			align-items: center;
		}

		.losungenMain .contactDetails i {
			width: 20px;
			color: var(--color-primary);
			text-align: center;
		}

		.losungenMain .contactForm {
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		.losungenMain .fieldRow {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
		}

		.losungenMain .contactForm label {
			display: flex;
			flex-direction: column;
			gap: 7px;
			font-size: 0.86rem;
			font-weight: 600;
		}

		.losungenMain .contactForm input,
		.losungenMain .contactForm textarea,
		.losungenMain .contactForm select {
			box-sizing: border-box;
			width: 100%;
			padding: 13px 15px;
			border: 1px solid rgba(255, 255, 255, 0.38);
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.1);
			color: #fff;
			font: inherit;
		}

		.losungenMain .contactForm textarea {
			min-height: 130px;
			resize: vertical;
		}

		.losungenMain .contactForm option {
			color: var(--color-text);
			background: var(--color-surface);
		}

		.losungenMain .submitButton {
			align-self: flex-start;
			border: 0;
			cursor: pointer;
		}

		@media (max-width: 820px) {
			.losungenMain .band {
				padding: 64px 20px;
			}

			.losungenMain .heroGrid,
			.losungenMain .signalGrid,
			.losungenMain .platformGrid,
			.losungenMain .contactGrid {
				grid-template-columns: 1fr;
				gap: 38px;
			}

			.losungenMain .heroCopy {
				text-align: left;
			}

			.losungenMain .buttonRow {
				justify-content: center;
			}

			.losungenMain .heroVisual {
				transform: none;
			}

			.losungenMain .tileGrid,
			.losungenMain .processGrid {
				grid-template-columns: 1fr;
				gap: 26px;
			}

			.losungenMain .functionRow {
				grid-template-columns: 1fr;
				gap: 8px;
			}

			.losungenMain .platformIntro {
				position: static;
			}

			.losungenMain .fieldRow {
				grid-template-columns: 1fr;
			}

			.losungenMain .submitButton {
				align-self: stretch;
				justify-content: center;
			}
		}

/* --- from projekte.html --- */
.projektSeite {
      overflow: hidden;
    }

    .projektSeite .band {
      width: 100%;
      box-sizing: border-box;
      padding: 96px 24px;
    }

    .projektSeite .band > .wrap {
      max-width: 1200px;
      margin: 0 auto;
    }

    .projektSeite .bandA {
      background: var(--A);
      color: #fff;
    }

    .projektSeite .bandB {
      background: var(--B);
      color: #12233A;
    }

    .projektSeite .bandC {
      background: var(--C);
      color: #fff;
    }

    .projektSeite .bandD {
      background: var(--D);
      color: #fff;
    }

    .projektSeite h1,
    .projektSeite h2,
    .projektSeite h3 {
      font-weight: 800;
      letter-spacing: -0.025em;
    }

    .projektSeite h1 {
      max-width: 680px;
      margin-bottom: 24px;
      font-size: clamp(2.8rem, 6vw, 5.5rem);
      line-height: 0.98;
    }

    .projektSeite h2 {
      margin-bottom: 18px;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.05;
    }

    .projektSeite h3 {
      margin-bottom: 10px;
      font-size: 1.45rem;
      line-height: 1.15;
    }

    .projektSeite p {
      max-width: 680px;
      font-size: 1.06rem;
    }

    .projektSeite .eyebrow {
      margin-bottom: 18px;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .projektSeite .bandC .eyebrow,
    .projektSeite .bandD .eyebrow,
    .projektSeite .bandA .eyebrow {
      color: var(--color-accent);
    }

    .projektSeite .lead {
      max-width: 600px;
      margin-bottom: 32px;
      color: rgba(255,255,255,0.82);
      font-size: 1.2rem;
    }

    .projektSeite .buttonGroup {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .projektSeite .primaryButton,
    .projektSeite .secondaryButton {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 22px;
      border-radius: 20px;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .projektSeite .primaryButton {
      background: var(--color-primary);
      color: var(--color-on-primary);
    }

    .projektSeite .secondaryButton {
      border: 1px solid rgba(255,255,255,0.42);
      color: #fff;
    }

    .projektSeite .primaryButton:hover,
    .projektSeite .secondaryButton:hover {
      transform: translateY(-4px);
    }

    .projektSeite .split {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 56px;
      align-items: center;
    }

    .projektSeite .heroImage,
    .projektSeite .aboutImage {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 20px;
      object-fit: cover;
      filter: saturate(0.9);
    }

    .projektSeite .heroImage {
      aspect-ratio: 4 / 3;
      box-shadow: 18px 18px 0 rgba(216, 69, 47, 0.72);
    }

    .projektSeite .aboutImage {
      aspect-ratio: 4 / 5;
      box-shadow: -18px 18px 0 rgba(207, 55, 241, 0.55);
    }

    .projektSeite .tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      grid-auto-rows: minmax(180px, auto);
    }

    .projektSeite .tilesFour {
      grid-template-columns: repeat(4, 1fr);
    }

    .projektSeite .featureTile {
      padding-top: 22px;
      border-top: 4px solid var(--C);
    }

    .projektSeite .iconContainer {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border-radius: 12px;
      background: rgba(86,134,137,0.16);
      color: var(--color-accent);
      font-size: 1.35rem;
    }

    .projektSeite .featureTile p,
    .projektSeite .projectTile p,
    .projektSeite .systemRow p {
      color: var(--color-muted);
    }

    .projektSeite .projectTile {
      min-height: 220px;
      padding: 24px 0 0;
      border-top: 1px solid currentColor;
      transition: transform 0.25s ease;
    }

    .projektSeite .projectTile:hover {
      transform: translateY(-4px);
    }

    .projektSeite .projectNumber {
      display: block;
      margin-bottom: 20px;
      color: var(--C);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .projektSeite .rows {
      display: grid;
      gap: 0;
    }

    .projektSeite .systemRow {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 32px;
      padding: 30px 0;
      border-top: 1px solid rgba(255,255,255,0.4);
    }

    .projektSeite .systemRow:first-child {
      border-top: 0;
    }

    .projektSeite .metric {
      color: var(--color-primary);
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1;
    }

    .projektSeite .systemRow p {
      color: rgba(255,255,255,0.78);
    }

    .projektSeite .tallCopy {
      padding-left: 28px;
      border-left: 4px solid var(--color-primary);
    }

    .projektSeite .tallCopy p {
      color: rgba(255,255,255,0.82);
    }

    .projektSeite .quoteGrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }

    .projektSeite blockquote {
      margin: 0;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.45);
      font-size: clamp(1.35rem, 2.3vw, 2rem);
      line-height: 1.3;
    }

    .projektSeite cite {
      display: block;
      margin-top: 18px;
      color: var(--color-accent);
      font-size: 0.92rem;
      font-style: normal;
    }

    .projektSeite .pricingGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      align-items: start;
    }

    .projektSeite .phase {
      padding-top: 20px;
      border-top: 3px solid var(--C);
    }

    .projektSeite .phaseMiddle {
      padding: 32px;
      border-radius: 20px;
      background: var(--A);
      color: #fff;
    }

    .projektSeite .phase p {
      color: var(--color-muted);
    }

    .projektSeite .phaseMiddle p {
      color: rgba(255,255,255,0.8);
    }

    .projektSeite .contactText p {
      color: rgba(255,255,255,0.82);
    }

    .projektSeite .formStacked {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .projektSeite .formStacked label {
      font-size: 0.9rem;
      font-weight: 700;
    }

    .projektSeite .formStacked input,
    .projektSeite .formStacked textarea,
    .projektSeite .formStacked select {
      width: 100%;
      box-sizing: border-box;
      padding: 13px 16px;
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 12px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      font: inherit;
    }

    .projektSeite .formStacked option {
      color: var(--color-text);
      background: var(--color-surface);
    }

    .projektSeite .formStacked textarea {
      min-height: 120px;
      resize: vertical;
    }

    .projektSeite .formStacked input::placeholder,
    .projektSeite .formStacked textarea::placeholder {
      color: rgba(255,255,255,0.68);
    }

    .projektSeite .formStacked button {
      align-self: flex-start;
      padding: 14px 24px;
      border: 0;
      border-radius: 20px;
      background: var(--color-primary);
      color: var(--color-on-primary);
      font: inherit;
      font-weight: 800;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .projektSeite .formStacked button:hover {
      transform: translateY(-4px);
    }

    @media (max-width: 900px) {
      .projektSeite .tilesFour {
        grid-template-columns: repeat(2, 1fr);
      }

      .projektSeite .split {
        grid-template-columns: 1fr;
      }

      .projektSeite .aboutImage {
        max-width: 620px;
      }
    }

    @media (max-width: 820px) {
      .projektSeite .band {
        padding: 64px 20px;
      }

      .projektSeite .tiles,
      .projektSeite .tilesFour,
      .projektSeite .quoteGrid,
      .projektSeite .pricingGrid,
      .projektSeite .systemRow {
        grid-template-columns: 1fr;
      }

      .projektSeite .heroImage {
        box-shadow: 10px 10px 0 rgba(216, 69, 47, 0.72);
      }

      .projektSeite .aboutImage {
        box-shadow: -10px 10px 0 rgba(207, 55, 241, 0.55);
      }

      .projektSeite .systemRow {
        gap: 12px;
      }

      .projektSeite .tallCopy {
        padding-left: 18px;
      }
    }

/* --- from ueber-uns.html --- */
.aboutBand {
			width: 100%;
			padding: 96px 24px;
			box-sizing: border-box;
		}

		.aboutWrap {
			max-width: 1200px;
			margin: 0 auto;
		}

		.aboutHero {
			background: var(--A);
			color: #fff;
		}

		.aboutLight {
			background: var(--B);
			color: #12233A;
		}

		.aboutCoral {
			background: var(--C);
			color: #fff;
		}

		.aboutDeep {
			background: var(--D);
			color: #fff;
		}

		.aboutSplit {
			display: grid;
			grid-template-columns: 1.05fr .95fr;
			gap: 56px;
			align-items: center;
		}

		.aboutSplitReverse {
			grid-template-columns: .95fr 1.05fr;
		}

		.aboutEyebrow {
			margin: 0 0 18px;
			font-size: .78rem;
			font-weight: 600;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--site-accent);
		}

		.aboutHero h1 {
			max-width: 680px;
			margin-bottom: 24px;
			font-size: clamp(2.8rem, 6vw, 5.8rem);
			line-height: 1.02;
		}

		.aboutBand h2 {
			margin-bottom: 20px;
			font-size: clamp(2rem, 4vw, 3.25rem);
			line-height: 1.08;
		}

		.aboutBand h3 {
			margin-bottom: 10px;
			font-size: 1.35rem;
			line-height: 1.2;
		}

		.aboutBand p {
			max-width: 650px;
			margin-bottom: 18px;
			font-size: 1.05rem;
		}

		.aboutHero p {
			max-width: 590px;
			font-size: 1.18rem;
		}

		.aboutActions {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			margin-top: 30px;
		}

		.aboutButton {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 13px 21px;
			border-radius: 20px;
			text-decoration: none;
			font-weight: 600;
			transition: transform .2s ease, opacity .2s ease;
		}

		.aboutButton:hover {
			transform: translateY(-4px);
			opacity: .9;
		}

		.aboutButtonPrimary {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.aboutButtonOutline {
			border: 1px solid rgba(255,255,255,.55);
			color: #fff;
		}

		.aboutImageFrame {
			position: relative;
			overflow: hidden;
			border-radius: 20px;
			border: 1px solid rgba(255,255,255,.2);
		}

		.aboutImageFrame img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 4 / 3;
			object-fit: cover;
		}

		.aboutImageFrame::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, rgba(14,42,71,.05), rgba(14,42,71,.45));
			pointer-events: none;
		}

		.aboutSectionIntro {
			display: flex;
			justify-content: space-between;
			align-items: end;
			gap: 32px;
			margin-bottom: 42px;
		}

		.aboutSectionIntro p {
			margin-bottom: 0;
			color: inherit;
			opacity: .82;
		}

		.aboutTiles {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 38px;
		}

		.aboutTile {
			padding: 25px 0 8px;
			border-top: 4px solid var(--C);
			transition: transform .25s ease;
		}

		.aboutTile:hover,
		.aboutPerson:hover {
			transform: translateY(-4px);
		}

		.aboutTile p,
		.aboutPerson p {
			font-size: .98rem;
			opacity: .82;
		}

		.iconBox {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 52px;
			margin-bottom: 18px;
			border-radius: 12px;
			background: rgba(86,134,137,.17);
			color: var(--site-accent);
			font-size: 1.35rem;
		}

		.aboutRows {
			display: grid;
			gap: 0;
		}

		.aboutRows > div {
			display: grid;
			grid-template-columns: 100px 1fr 1.5fr;
			gap: 28px;
			align-items: start;
			padding: 30px 0;
			border-top: 1px solid currentColor;
		}

		.aboutNumber {
			font-size: 1.25rem;
			font-weight: 800;
			color: var(--site-accent);
		}

		.aboutRows p {
			margin-bottom: 0;
			opacity: .86;
		}

		.aboutTeam {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 24px;
		}

		.aboutPerson {
			padding: 20px;
			background: rgba(255,255,255,.08);
			color: #fff;
			border-radius: 20px;
			backdrop-filter: blur(12px);
			transition: transform .25s ease;
		}

		.aboutPerson img {
			display: block;
			width: 100%;
			aspect-ratio: 1;
			margin-bottom: 18px;
			border-radius: 12px;
			object-fit: cover;
		}

		.aboutPerson h3 {
			margin-bottom: 4px;
		}

		.aboutPerson p {
			margin-bottom: 0;
		}

		.aboutMilestones {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1px;
			border-top: 1px solid rgba(18,57,94,.32);
			border-bottom: 1px solid rgba(18,57,94,.32);
		}

		.aboutMilestone {
			padding: 28px 22px;
			border-right: 1px solid rgba(18,57,94,.32);
		}

		.aboutMilestone:last-child {
			border-right: 0;
		}

		.aboutMilestone strong {
			display: block;
			margin-bottom: 12px;
			font-size: 2.5rem;
			line-height: 1;
			color: var(--C);
		}

		.aboutMilestone p {
			margin-bottom: 0;
			font-size: .95rem;
		}

		.aboutStory {
			max-width: 760px;
			margin-left: auto;
		}

		.aboutStoryMark {
			margin-bottom: 22px;
			color: var(--site-accent);
			font-size: 2.2rem;
		}

		.aboutQuote {
			max-width: 850px;
			margin: 0;
			font-size: clamp(1.7rem, 3vw, 3rem);
			font-style: italic;
			line-height: 1.3;
		}

		.aboutQuote cite {
			display: block;
			margin-top: 24px;
			font-size: 1rem;
			font-style: normal;
			opacity: .78;
		}

		.aboutClosing {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 56px;
			align-items: center;
		}

		.aboutContactLine {
			display: flex;
			align-items: center;
			gap: 14px;
			margin-top: 25px;
			font-size: 1.1rem;
		}

		.aboutContactLine i {
			color: var(--site-accent);
		}

		@media (max-width: 820px) {
			.aboutBand {
				padding: 64px 20px;
			}

			.aboutSplit,
			.aboutClosing,
			.aboutTiles,
			.aboutTeam,
			.aboutMilestones,
			.aboutRows > div {
				grid-template-columns: 1fr;
			}

			.aboutSectionIntro {
				display: block;
				margin-bottom: 28px;
			}

			.aboutSectionIntro p {
				margin-top: 12px;
			}

			.aboutMilestones {
				gap: 0;
			}

			.aboutMilestone {
				border-right: 0;
				border-bottom: 1px solid rgba(18,57,94,.32);
			}

			.aboutMilestone:last-child {
				border-bottom: 0;
			}

			.aboutRows > div {
				gap: 8px;
			}

			.aboutStory {
				margin-left: 0;
			}
		}

/* --- from index.php --- */
:root {
			--mainA: #0E2A47;
			--mainB: #F2EDE4;
			--mainC: #D8452F;
			--mainD: #12395E;
		}

		.mainBand {
			width: 100%;
			padding: 96px 24px;
			box-sizing: border-box;
		}

		.mainWrap {
			max-width: 1200px;
			margin: 0 auto;
		}

		.bandA {
			background: var(--mainA);
			color: #fff;
		}

		.bandB {
			background: var(--mainB);
			color: #12233A;
		}

		.bandC {
			background: var(--mainC);
			color: #fff;
		}

		.bandD {
			background: var(--mainD);
			color: #fff;
		}

		.heroGrid,
		.aboutGrid,
		.contactGrid {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 56px;
			align-items: center;
		}

		.aboutGrid {
			grid-template-columns: 0.9fr 1.1fr;
		}

		.heroKicker,
		.sectionKicker {
			margin: 0 0 18px;
			color: var(--color-primary);
			font-size: 0.8rem;
			font-weight: 600;
			letter-spacing: 0.16em;
			text-transform: uppercase;
		}

		.bandC .sectionKicker,
		.bandD .sectionKicker {
			color: var(--color-accent);
		}

		.heroTitle {
			max-width: 720px;
			margin-bottom: 24px;
			font-size: clamp(2.8rem, 6vw, 5.6rem);
			line-height: 1.02;
			letter-spacing: -0.04em;
		}

		.sectionTitle {
			margin-bottom: 42px;
			font-size: clamp(2rem, 4vw, 3.5rem);
			line-height: 1.08;
			letter-spacing: -0.03em;
		}

		.heroCopy {
			max-width: 630px;
			margin-bottom: 32px;
			color: rgba(255, 255, 255, 0.82);
			font-size: 1.15rem;
		}

		.buttonRow {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
		}

		.mainButton,
		.outlineButton {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 13px 22px;
			border-radius: 20px;
			font-weight: 600;
			text-decoration: none;
			transition: transform 0.2s ease, filter 0.2s ease;
		}

		.mainButton {
			background: var(--color-accent);
			color: var(--color-on-accent);
		}

		.outlineButton {
			border: 1px solid rgba(255, 255, 255, 0.5);
			color: #fff;
		}

		.mainButton:hover,
		.outlineButton:hover {
			transform: translateY(-4px);
			filter: brightness(1.08);
		}

		.imageFrame {
			position: relative;
			overflow: hidden;
			border-radius: 20px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			background: rgba(255, 255, 255, 0.08);
			backdrop-filter: blur(12px);
		}

		.imageFrame img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 4 / 3;
			object-fit: cover;
			opacity: 0.88;
		}

		.imageOverlay {
			position: absolute;
			right: 22px;
			bottom: 22px;
			left: 22px;
			padding: 16px 18px;
			border-left: 3px solid var(--color-primary);
			background: rgba(14, 42, 71, 0.86);
			color: #fff;
			backdrop-filter: blur(8px);
		}

		.imageOverlay strong {
			display: block;
			margin-bottom: 3px;
		}

		.featureTiles {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;
			grid-auto-rows: minmax(180px, auto);
		}

		.featureTile {
			padding: 28px 0 8px;
			border-top: 4px solid var(--mainC);
			transition: transform 0.25s ease;
		}

		.featureTile:hover,
		.areaTile:hover,
		.priceColumn:hover {
			transform: translateY(-4px);
		}

		.iconBox {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 56px;
			height: 56px;
			margin-bottom: 20px;
			border-radius: 12px;
			background: rgba(86, 134, 137, 0.16);
			color: var(--color-accent);
			font-size: 1.35rem;
		}

		.featureTile h3,
		.areaTile h3,
		.priceColumn h3 {
			margin-bottom: 10px;
			font-size: 1.45rem;
		}

		.featureTile p,
		.areaTile p,
		.priceColumn p {
			margin-bottom: 0;
			color: inherit;
			opacity: 0.78;
		}

		.systemRows {
			display: grid;
			gap: 0;
		}

		.systemRow {
			display: grid;
			grid-template-columns: 120px 1fr 1fr;
			gap: 32px;
			padding: 32px 0;
			border-top: 1px solid rgba(255, 255, 255, 0.35);
		}

		.systemNumber {
			color: var(--color-accent);
			font-size: 0.85rem;
			font-weight: 600;
			letter-spacing: 0.14em;
		}

		.systemRow h3 {
			margin: 0;
			font-size: 1.5rem;
		}

		.systemRow p {
			margin: 0;
			color: rgba(255, 255, 255, 0.76);
		}

		.aboutImage img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 4 / 5;
			object-fit: cover;
			border-radius: 20px;
		}

		.aboutText p {
			max-width: 650px;
			font-size: 1.16rem;
			color: rgba(255, 255, 255, 0.82);
		}

		.aboutText p:last-child {
			margin-bottom: 0;
		}

		.aboutMarker {
			display: inline-block;
			margin-top: 18px;
			padding-left: 18px;
			border-left: 3px solid var(--color-primary);
			font-size: 1.1rem;
		}

		.areaTiles {
			display: grid;
			grid-template-columns: repeat(2, minmax(260px, 1fr));
			gap: 36px 48px;
		}

		.areaTile {
			padding: 24px 0 4px;
			border-bottom: 1px solid rgba(18, 35, 58, 0.35);
			transition: transform 0.25s ease;
		}

		.areaTile .iconBox {
			margin-bottom: 16px;
		}

		.quoteGrid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
		}

		.quoteBlock {
			margin: 0;
			padding-top: 20px;
			border-top: 1px solid rgba(255, 255, 255, 0.35);
		}

		.quoteBlock p {
			margin-bottom: 22px;
			font-size: clamp(1.35rem, 2.5vw, 2rem);
			line-height: 1.35;
			font-style: italic;
		}

		.quoteBlock cite {
			color: rgba(255, 255, 255, 0.7);
			font-size: 0.95rem;
			font-style: normal;
		}

		.priceGrid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40px;
			align-items: start;
		}

		.priceColumn {
			padding: 10px 0;
			transition: transform 0.25s ease;
		}

		.priceColumn h3 {
			margin-top: 18px;
		}

		.priceHighlight {
			padding: 32px;
			border-radius: 20px;
			background: var(--mainA);
			color: #fff;
		}

		.priceHighlight p {
			color: rgba(255, 255, 255, 0.82);
		}

		.priceLabel {
			color: var(--mainC);
			font-size: 0.8rem;
			font-weight: 600;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.contactIntro h2 {
			margin-bottom: 20px;
			font-size: clamp(2rem, 4vw, 3.6rem);
		}

		.contactIntro p {
			max-width: 460px;
			color: rgba(255, 255, 255, 0.82);
			font-size: 1.15rem;
		}

		.contactForm {
			display: flex;
			flex-direction: column;
			gap: 16px;
			width: 100%;
		}

		.contactForm label {
			font-size: 0.9rem;
			font-weight: 600;
		}

		.contactForm input,
		.contactForm textarea {
			box-sizing: border-box;
			width: 100%;
			margin-top: 6px;
			padding: 13px 16px;
			border: 1px solid rgba(255, 255, 255, 0.4);
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.1);
			color: #fff;
			font: inherit;
		}

		.contactForm textarea {
			min-height: 132px;
			resize: vertical;
		}

		.contactForm input::placeholder,
		.contactForm textarea::placeholder {
			color: rgba(255, 255, 255, 0.62);
		}

		.contactForm button {
			align-self: flex-start;
			border: 0;
			cursor: pointer;
		}

		@media (max-width: 820px) {
			.mainBand {
				padding: 64px 20px;
			}

			.heroGrid,
			.aboutGrid,
			.contactGrid,
			.featureTiles,
			.systemRow,
			.quoteGrid,
			.priceGrid {
				grid-template-columns: 1fr;
			}

			.areaTiles {
				grid-template-columns: 1fr;
			}

			.systemRow {
				gap: 10px;
			}

			.systemRow p {
				margin-top: 4px;
			}

			.heroTitle {
				font-size: clamp(2.7rem, 12vw, 4.4rem);
			}

			.aboutGrid {
				display: flex;
				flex-direction: column;
				align-items: stretch;
			}

			.aboutImage {
				order: 1;
			}

			.aboutText {
				order: 2;
			}

			.priceHighlight {
				padding: 28px 24px;
			}

			.contactForm button {
				align-self: stretch;
				justify-content: center;
			}
		}