/* Duran Co. – Holding-Website
   Tokens und Typografie: docs/design-brief-web.md
   Markenfarbe Duran Co. nur hier ändern: --accent */

/* ── Schriften (selbst gehostet, OFL, siehe fonts/OFL-*.txt) ── */
@font-face {
  font-family: "DC Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "DC Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/eb-garamond-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DC Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DC Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/eb-garamond-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DC Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ── */
:root {
  --accent: #2E3BFF;
  --ink: #000000;
  --paper: #FFFFFF;
  --line: #DDDDDD;
  --line-soft: #EDEDED;
  --muted: #767676;
  --text-2: #555555;
  --surface: #F2F2F2;
  --surface-2: #F8F8F8;
  --footer-line: #B6B6B6;
  --input-line: #D8D8D8;
  --shadow-card: 0 0 2rem rgba(0,0,0,.3);
  --img-bg: #EDEDED;
  --grid-bg: #CCCCCC;

  --brand-qardify: #FFA31F;
  --brand-qardify-text: #C06A06;
  --brand-amo: #FF3B1F;
  --brand-relay: #00A86B;

  --theme: var(--accent);

  --sans: "DC Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "DC Serif", Garamond, Georgia, serif;

  --ease-zoom: cubic-bezier(0.22, 1, 0.36, 1);
  --t-color: 0.25s ease;
  --gutter: 1rem;
  --card-h: 22rem;
}

/* ── Basis ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  background: var(--paper);
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -10rem; z-index: 20;
  padding: 1rem 2rem; background: var(--ink); color: var(--paper);
  font: 500 1.4rem/2 var(--sans);
}
.skip-link:focus { top: 2rem; }

/* ── Raster ── */
.container { width: 85.33%; max-width: 260rem; margin: 0 auto; }
.grid { display: flex; flex-wrap: wrap; margin: 0 calc(var(--gutter) * -1); }
.col { padding: 0 var(--gutter); width: 100%; }
@media (min-width: 750px) {
  :root { --gutter: 0.7rem; }
  .container { width: 84.63%; }
  .col-label { width: 33.3333%; }
  .col-content { width: 66.6667%; }
  .col-third { width: 33.3333%; }
}
@media (min-width: 1100px) {
  :root { --gutter: 1rem; --card-h: 36rem; }
  .container { width: 73.61%; }
}
@media (min-width: 1800px) {
  :root { --card-h: 65rem; }
  .container { width: 74.22%; }
}

/* ── Seiten ── */
.page-head { padding: 4rem 0 4rem; }
.section { border-top: 1px solid var(--line); padding: 4rem 0; }
@media (min-width: 1100px) {
  .page-head { padding: 10rem 0 6rem; }
  .section { padding: 6rem 0; }
}
@media (min-width: 1800px) {
  .section { padding: 12rem 0; }
}

/* Mit JavaScript ist immer nur eine Seite sichtbar; ohne JavaScript alle untereinander. */
.js .page { display: none; }
.js[data-page="start"] .page[data-page="start"],
.js[data-page="marken"] .page[data-page="marken"],
.js[data-page="kontakt"] .page[data-page="kontakt"],
.js[data-page="impressum"] .page[data-page="impressum"],
.js[data-page="datenschutz"] .page[data-page="datenschutz"] { display: block; }
.js[data-page="uebersicht"] .site { display: none; }

/* ── Typografie ── */
.h1 {
  font: 500 3.2rem/3.8rem var(--sans);
  letter-spacing: -0.02em;
}
.label {
  font: 500 1.8rem/2.4rem var(--sans);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}
.serif-text {
  font: 400 1.8rem/2.7rem var(--serif);
  letter-spacing: -0.01em;
}
.serif-text + .serif-text { margin-top: 1.5em; }
.intro { margin-top: 2.4rem; }
.index-list > li {
  border-top: 1px solid var(--line-soft);
  font: 500 2.8rem/3.4rem var(--sans);
  letter-spacing: -0.02em;
}
.index-list > li:first-child { border-top: 0; }
.index-list a { display: block; padding: 2rem 0; transition: color var(--t-color); }
.index-list > li:first-child a { padding-top: 0; }
.status { color: var(--muted); }

@media (min-width: 750px) {
  .h1 { font-size: 3.8rem; line-height: 4.1rem; }
  .label { margin-bottom: 0; }
  .index-list > li { font-size: 3.2rem; line-height: 3.6rem; }
}
@media (min-width: 1100px) {
  .h1 { font-size: 5.6rem; line-height: 5.6rem; }
  .label { font-size: 2.1rem; line-height: 2.8rem; }
  .serif-text { font-size: 2rem; line-height: 3rem; }
  .intro { margin-top: 3.2rem; }
  .index-list > li { font-size: 3.6rem; line-height: 4rem; }
  .index-list a { padding: 3rem 0; }
}
@media (min-width: 1800px) {
  .h1 { font-size: 10rem; line-height: 10.7rem; }
  .label { font-size: 3.5rem; line-height: 4.7rem; }
  .serif-text { font-size: 4rem; line-height: 6rem; }
  .intro { margin-top: 5rem; }
  .index-list > li { font-size: 7rem; line-height: 7.7rem; }
  .index-list a { padding: 5rem 0; }
}

/* Textlink */
.text-link {
  font-family: var(--serif);
  color: var(--accent);
  box-shadow: inset 0 -1px 0 var(--paper), inset 0 -2px 0 currentColor;
  transition: color var(--t-color);
}
.text-link:hover { color: var(--ink); }

/* Marken */
.brand-qardify { --brand: var(--brand-qardify); --brand-text: var(--brand-qardify-text); }
.brand-amo { --brand: var(--brand-amo); }
.brand-relay { --brand: var(--brand-relay); }
.index-list a:hover, .index-list a:focus-visible { color: var(--accent); }
.brand-section { border-top: 4px solid var(--brand); }
.brand-link:hover { color: var(--brand-text, var(--brand)); }

/* ── Farbbalken ── */
.top-line {
  position: fixed; top: 0; left: 0; right: 0; height: 1rem; z-index: 9;
  background-color: var(--theme);
  transition: background-color 0.5s;
}

/* ── Startseiten-Einheit ── */
.home-lockup { display: inline-flex; align-items: center; gap: 1.4rem; color: var(--ink); }
.home-lockup__logo { width: 4.4rem; height: 4.4rem; flex: none; color: var(--accent); }
.home-lockup__text { font: 400 1.2rem/1.4rem var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.home-lockup__text span { display: block; }
.home-lockup__strong { font-weight: 500; }
@media (max-width: 749px) { .home-lockup { margin-bottom: 4rem; } }
@media (min-width: 750px) { .home-lockup__logo { width: 5.6rem; height: 5.6rem; } }
@media (min-width: 1100px) { .home-lockup__text { font-size: 1.4rem; line-height: 1.6rem; } }
@media (min-width: 1800px) {
  .home-lockup__logo { width: 8.8rem; height: 8.8rem; }
  .home-lockup__text { font-size: 2.2rem; line-height: 2.6rem; }
}

/* ── Logo-Karte und Kopfzeile der Unterseiten ── */
.site-header {
  position: sticky; top: 0; z-index: 8;
  padding: 1.5rem 7.335% 1.7rem;
  opacity: 1; visibility: visible;
  transition: background-color .3s, opacity .3s, visibility 0s;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(0,0,0,.2); opacity: 0; transition: opacity .3s;
}
.site-header.is-scrolled { background-color: var(--theme); }
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled .logo-card { color: var(--paper); }
.js[data-page="start"] .site-header {
  position: absolute; padding: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: background-color .3s, opacity .3s, visibility 0s .3s;
}
.logo-card { display: block; perspective: 100rem; width: 4.4rem; height: 4.4rem; color: var(--theme); transition: color .5s; }
.logo-card.is-entering { opacity: 0; animation: fade-in .3s forwards; }
.logo-face { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s; }
.logo-front, .logo-back { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.logo-back { transform: rotateX(-180deg); }
.logo-card.is-flipped .logo-face, .logo-card.is-peeked .logo-face { transform: rotateX(-180deg); }
.logo-card.is-flipped.is-peeked .logo-face { transform: rotateX(0deg); }
.logo-card svg path { transition: fill .5s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 750px) {
  .site-header { padding: 4rem 7.685% 2rem; }
  .logo-card { width: 5.6rem; height: 5.6rem; }
}
@media (min-width: 1100px) {
  .site-header { position: static; padding: 0; height: 0; }
  .site-header::after { display: none; }
  .site-header.is-scrolled { background: none; }
  .site-header.is-scrolled .logo-card { color: var(--theme); }
  .logo-card { position: fixed; top: 6rem; left: calc(6.5975% - 2.8rem); z-index: 8; }
}
@media (min-width: 1800px) {
  .logo-card { width: 8.8rem; height: 8.8rem; top: 10.6rem; left: calc(6.445% - 4.4rem); }
}
.button { display: inline-block; padding: 1rem 2.5rem; border-radius: 5rem; background: var(--ink); color: var(--paper); font: 500 1.4rem/2 var(--sans); transition: opacity .25s; }
.button:hover { opacity: .8; }

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 9;
  padding: 7rem 0 9rem;
  font: 400 1.4rem/2.4rem var(--sans);
  border-top: 1px solid var(--line);
  background: var(--paper); color: var(--ink);
}
.js:not([data-page="start"]) .site-footer { background: var(--ink); color: var(--paper); border-top-color: var(--ink); }
.footer-head { font: inherit; color: var(--muted); margin-bottom: 0.8rem; }
.site-footer .col { margin-bottom: 3rem; }
.site-footer a { box-shadow: inset 0 -1px 0 currentColor; transition: color var(--t-color); }
.site-footer a:hover { color: var(--accent); }
.copyright { margin-top: 2.4rem; }
@media (max-width: 1099px) { .site-footer { border-top-color: var(--footer-line); } }
@media (min-width: 1100px) {
  .site-footer { font-size: 1.6rem; line-height: 2.8rem; }
  .js:not([data-page="start"]) .site-footer {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H56V56H0ZM7.71%2038.66C10.93%2038.66%2012.89%2036.64%2012.89%2033.41C12.89%2030.19%2010.91%2028.16%207.75%2028.16L4%2028.16L4%2038.66M6.17%2036.84L6.17%2029.99L7.62%2029.99C9.70%2029.99%2010.71%2031.20%2010.71%2033.41C10.71%2035.62%209.72%2036.84%207.59%2036.84M18.13%2038.83C20.75%2038.83%2022.46%2037.28%2022.46%2035.01L22.46%2028.16L20.34%2028.16L20.34%2034.83C20.34%2036.07%2019.47%2036.96%2018.13%2036.96C16.80%2036.96%2015.93%2036.06%2015.93%2034.83L15.93%2028.16L13.81%2028.16L13.81%2035.01C13.81%2037.28%2015.51%2038.83%2018.13%2038.83M23.70%2038.66L25.87%2038.66L25.87%2034.99L27.78%2034.99C27.78%2034.99%2027.79%2034.99%2027.80%2034.99L29.66%2038.66L31.98%2038.66L29.88%2034.58C31.05%2034.04%2031.75%2033%2031.75%2031.61C31.75%2029.50%2030.27%2028.16%2027.90%2028.16L23.70%2028.16M25.87%2033.25L25.87%2029.97L27.77%2029.97C28.92%2029.97%2029.63%2030.61%2029.63%2031.61C29.63%2032.61%2028.92%2033.25%2027.78%2033.25M32.08%2038.66L34.42%2038.66L35.18%2036.37L39.11%2036.37L39.84%2038.66L42.24%2038.66L38.56%2028.16L35.77%2028.16M35.77%2034.64L36.13%2033.56C36.47%2032.48%2036.79%2031.41%2037.17%2030.11C37.54%2031.41%2037.87%2032.48%2038.19%2033.56L38.55%2034.64M42.81%2038.66L44.98%2038.66L44.98%2033.80C44.98%2033.34%2044.97%2032.45%2044.93%2031.35C45.52%2032.41%2046.06%2033.32%2046.36%2033.80L49.42%2038.66L51.71%2038.66L51.71%2028.16L49.55%2028.16L49.55%2033.36C49.55%2033.80%2049.55%2034.67%2049.58%2035.48C49.17%2034.73%2048.71%2033.93%2048.47%2033.53L45.09%2028.16L42.81%2028.16M8.99%2052.17C11.45%2052.17%2013.28%2050.65%2013.61%2048.31L11.43%2048.31C11.16%2049.55%2010.26%2050.25%209.02%2050.25C7.23%2050.25%206.18%2048.89%206.18%2046.76C6.18%2044.61%207.23%2043.25%209.02%2043.25C10.26%2043.25%2011.17%2043.96%2011.42%2045.20L13.61%2045.20C13.28%2042.85%2011.45%2041.33%208.99%2041.33C6.10%2041.33%204%2043.40%204%2046.76C4%2050.09%206.11%2052.17%208.99%2052.17M19.14%2052.17C21.96%2052.17%2024.09%2050.10%2024.09%2046.76C24.09%2043.41%2021.96%2041.33%2019.14%2041.33C16.31%2041.33%2014.19%2043.41%2014.19%2046.76C14.19%2050.08%2016.31%2052.17%2019.14%2052.17M19.14%2050.25C17.52%2050.25%2016.37%2048.98%2016.37%2046.76C16.37%2044.52%2017.52%2043.25%2019.14%2043.25C20.76%2043.25%2021.91%2044.52%2021.91%2046.76C21.91%2048.98%2020.76%2050.25%2019.14%2050.25M26.01%2052.13C26.68%2052.13%2027.21%2051.60%2027.21%2050.93C27.21%2050.27%2026.68%2049.73%2026.01%2049.73C25.35%2049.73%2024.82%2050.27%2024.82%2050.93C24.82%2051.60%2025.35%2052.13%2026.01%2052.13%22%2F%3E%3C%2Fsvg%3E");
    min-height: calc(100vh - 6rem);
    background-repeat: no-repeat; background-attachment: fixed;
    background-size: 5.6rem 5.6rem; background-position: calc(6.5975% - 2.8rem) 6rem;
  }
}
@media (min-width: 1800px) {
  .site-footer { font-size: 3rem; line-height: 5.2rem; }
  .js:not([data-page="start"]) .site-footer { min-height: calc(100vh - 10.6rem); background-size: 8.8rem 8.8rem; background-position: calc(6.445% - 4.4rem) 10.6rem; }
}

/* ── Menü-Raster (/uebersicht) ── */
.overview {
  position: fixed; inset: 0; z-index: 5; overflow-y: auto;
  background: var(--grid-bg);
  padding: 9rem 0 8rem;
}
.overview[hidden] { display: none; }
.overview-grid { display: flex; flex-wrap: wrap; margin: 0 -1rem; }
.overview-grid > li { width: 100%; padding: 0 1rem; margin-bottom: 4rem; }
@media (min-width: 750px) { .overview-grid > li { width: 50%; } }
@media (min-width: 1100px) { .overview { padding: 10rem 0; } }
.card { display: block; }
.card-title {
  font: 500 1.8rem/2.4rem var(--sans); letter-spacing: -0.01em;
  margin-bottom: 1.2rem; color: var(--ink);
}
@media (min-width: 1100px) { .card-title { font-size: 2.1rem; line-height: 2.8rem; } }
@media (min-width: 1800px) { .card-title { font-size: 3.5rem; line-height: 4.7rem; } }
.card-frame {
  position: relative; height: var(--card-h); overflow: hidden;
  background: var(--paper);
  transition: box-shadow 0.25s;
}
.card:hover .card-frame, .card:focus-visible .card-frame { box-shadow: var(--shadow-card); }
.card-scaler {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  background: var(--paper);
}
.card-scaler .page { display: block; }
.card-topline { height: 1rem; background: var(--theme); }

/* Während des Zoom-Übergangs liegt die Seite als feste Ebene über dem Raster. */
.site.is-zooming {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 6;
  background: var(--paper);
  transform-origin: 0 0;
  will-change: transform, clip-path;
}

/* ── Bewegung reduzieren: Endzustände ohne Kipp-/Fade-Animation ── */
@media (prefers-reduced-motion: reduce) {
  .logo-face, .logo-card, .logo-card svg path, .top-line, .site-header,
  .site-header::after, .text-link, .index-list a, .card-frame,
  .js[data-page="start"] .site-header { transition: none; }
  .logo-card.is-entering { animation: none; opacity: 1; }
}

/* Sprungziele (/marken#…) nicht unter der mobilen Kopfzeile verstecken */
.brand-section { scroll-margin-top: 9rem; }
@media (min-width: 1100px) { .brand-section { scroll-margin-top: 2rem; } }