/*
 * cd.css
 * CD-Styles nach Manual Stadt Reutlingen
 * Mirko Psak, MP Media
 */

/* ---------------------------------------------
   FONTS
   Reutlingen Sans - die Hausschrift
--------------------------------------------- */

@font-face {
    font-family: 'Reutlingen Sans';
    src: url('/assets/font/ReutlingenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reutlingen Sans';
    src: url('/assets/font/ReutlingenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Grundschrift */
html {
    font-size: 18px;
}

@media (max-width: 768px) {
    html { font-size: 16px; }
}

/* Kein blauer Tap-Highlight */
* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Reutlingen Sans', sans-serif;
    font-size: calc(1rem * var(--font-scale, 1));
    font-weight: 400;
    letter-spacing: 0;
    transition: font-size 0.2s ease;
}


/* ---------------------------------------------
   FARBEN
   Die CD-Farben
--------------------------------------------- */

:root {
    /* Schrift-Skalierung für A11y */
    --font-scale: 1;

    /* CD-Farben Stadt Reutlingen */

    /* Echtes Schwarz */
    --schwarz: #000000;
    --schwarz-text: #FFFFFF;

    /* Flächenschwarz (CD-Farbe, dunkles Anthrazit) */
    --flaechenschwarz: #282828;
    --flaechenschwarz-light: #AAAAAA;
    --flaechenschwarz-text: #FFFFFF;

    /* Rot */
    --rot: #FF0050;
    --rot-light: #FE99B9;
    --rot-text: #000000;

    /* Rosa */
    --rosa: #FA9BD2;
    --rosa-text: #000000;

    /* Gelb */
    --gelb: #FFF000;
    --gelb-text: #000000;

    /* Grün */
    --gruen: #50C878;
    --gruen-text: #000000;

    /* Blau */
    --blau: #32A0F0;
    --blau-light: #ACD9F8;
    --blau-text: #000000;

    /* Siena */
    --siena: #F0695A;
    --siena-text: #000000;

    /* Beige */
    --beige: #D2B496;
    --beige-text: #000000;

    /* Lachs */
    --lachs: #F5AF82;
    --lachs-text: #000000;

    /* Lichtgrau */
    --lichtgrau: #DCDCDC;
    --lichtgrau-light: #F1F1F1;
    --lichtgrau-text: #000000;
}

/* Hintergrund-Utilities für CD-Farben (inkl. Standard-Textfarbe laut CD) */
.bg--schwarz { background-color: var(--schwarz); color: var(--schwarz-text); }
.bg--flaechenschwarz { background-color: var(--flaechenschwarz); color: var(--flaechenschwarz-text); }
.bg--rot { background-color: var(--rot); color: var(--rot-text); }
.bg--rosa { background-color: var(--rosa); color: var(--rosa-text); }
.bg--gelb { background-color: var(--gelb); color: var(--gelb-text); }
.bg--gruen { background-color: var(--gruen); color: var(--gruen-text); }
.bg--blau { background-color: var(--blau); color: var(--blau-text); }
.bg--siena { background-color: var(--siena); color: var(--siena-text); }
.bg--beige { background-color: var(--beige); color: var(--beige-text); }
.bg--lachs { background-color: var(--lachs); color: var(--lachs-text); }
.bg--lichtgrau { background-color: var(--lichtgrau); color: var(--lichtgrau-text); }
.bg--weiss { background-color: #ffffff; color: var(--schwarz); }


/* ---------------------------------------------
   TYPOGRAFIE
   H1 bis H6, Fließtext usw.
--------------------------------------------- */

h1, h2, h3, h4, h5 {
    font-family: 'Reutlingen Sans', sans-serif;
    font-weight: 700;
    line-height: 0.95;
    margin: 0;
    transition: font-size 0.2s ease;
}

h1 { margin-bottom: 2.5rem; }
h2 { margin-bottom: 1.5rem; }
h3, h4, h5 { margin-bottom: 0.5rem; }

/* Fluid Typography mit clamp() */
/* Abgeleitet von H1 (max 75px) */

h1 {
    font-size: calc(clamp(2.25rem, 5vw + 1.5rem, 4.75rem) * var(--font-scale, 1));
    letter-spacing: -0.03em;
}

h2 {
    font-size: calc(clamp(1.9rem, 4vw + 1rem, 3.75rem) * var(--font-scale, 1));
    letter-spacing: -0.04em;
}

h3 {
    font-size: calc(clamp(1.1rem, 1.5vw + 0.5rem, 1.5rem) * var(--font-scale, 1));
    letter-spacing: -0.02em;
}

h4 {
    font-size: calc(clamp(1rem, 1vw + 0.25rem, 1.25rem) * var(--font-scale, 1));
    letter-spacing: -0.01em;
}

h5 {
    font-size: calc(clamp(0.85rem, 0.5vw + 0.5rem, 1rem) * var(--font-scale, 1));
}

p {
    margin: 0;
    line-height: 1.35;
}

p + p {
    margin-top: 0.75rem;
}


/* ---------------------------------------------
   BUTTONS
--------------------------------------------- */

button,
.btn {
    font-family: 'Reutlingen Sans', sans-serif;
    font-size: calc(1rem * var(--font-scale, 1));
    font-weight: 700;
    padding: 0.75em 1.5em;
    background-color: transparent;
    border: 2px solid var(--schwarz);
    border-radius: 2rem;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: var(--schwarz);
    transition: background-color 0.2s ease, color 0.2s ease;
    touch-action: manipulation;
}

/* Hover nur auf Desktop (JS setzt .has-hover auf html) */
.has-hover .btn:hover {
    background-color: var(--flaechenschwarz);
    color: var(--flaechenschwarz-text);
}

/* Aktiver Klick-State */
.btn:active {
    background-color: var(--flaechenschwarz);
    color: var(--flaechenschwarz-text);
    transition: none;
}

/* Tap-Feedback per JS-Klasse (.btn--tap) */
.btn--tap {
    background-color: var(--flaechenschwarz) !important;
    color: var(--flaechenschwarz-text) !important;
    transition: none !important;
}

/* Focus: nur Keyboard sichtbar, kein sticky Outline nach Maus-Klick */
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
    outline: none;
}

button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--rot);
    outline-offset: 2px;
}

.btn--small {
    font-size: calc(0.85rem * var(--font-scale, 1));
    padding: 0.5em 1.25em;
}

.btn--active {
    background-color: var(--flaechenschwarz);
    color: var(--flaechenschwarz-text);
}

.btn--loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn--large {
    font-size: calc(1.1rem * var(--font-scale, 1));
    padding: 1em 2em;
}

button:disabled,
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn__spinner {
    animation: btn-spin 1s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}


/* ---------------------------------------------
   FORMULARE
--------------------------------------------- */

input,
textarea,
select {
    font-family: 'Reutlingen Sans', sans-serif;
    font-size: calc(1rem * var(--font-scale, 1));
    padding: 0.75em 1em;
    border: 2px solid var(--schwarz);
    border-radius: 0;
    background-color: #FFFFFF;
    width: 100%;
}

/* Focus-States für Formulare */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--schwarz);
    box-shadow: 0 0 0 1px var(--schwarz);
}

label {
    font-weight: 700;
    display: block;
    margin-bottom: 0.5em;
}


/* ---------------------------------------------
   ICONS (Lucide)
   Skalieren wie Font Awesome mit der Textgröße
--------------------------------------------- */

.lucide,
[data-lucide] {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 2;
    display: inline-block;
    margin-right: 0.25em;
}


/* ---------------------------------------------
   LINKS
   Werden in layout.css kontextspezifisch gestyled
--------------------------------------------- */