/* =========================================================
   default-override.css (GLOBAL)
   Projekt: Haus Karin (Porto HTML v13.0.0)
   Lade-Reihenfolge bei dir:
   1) theme.css
   2) default.css (Skin)
   3) default-override.css (DIESE DATEI)

   Ziel:
   - Tokens (Farben/Radius/Typo) zentral über CSS-Variablen
   - Global-Styles konsistent, barrierefrei
   - rem + clamp() statt fester px-Werte (wo wir Werte setzen)
========================================================= */

/* =========================================================
   1) Design-Tokens (überschreiben Skin-Variablen aus default.css)
========================================================= */
:root{
  /* Haus-Karin Palette (zusätzlich als eigene Tokens) */
  --hk-green: #308426;
  --hk-blue: #18396C;
  --hk-red: #AA3D0C;
  --hk-gold: #806C15;
  --hk-lightyellow: #FFF580;
  --hk-orange: #F57C18;
  --hk-grey: #707070;
  --hk-black: #111111;
  --hk-violet: #810D7A;

  /* Porto Skin Mappings (falls später Skin-Datei aktualisiert wird) */
  --primary: var(--hk-blue);
  --secondary: var(--hk-green);
  --tertiary: var(--hk-red);
  --quaternary: var(--hk-violet);

  /* Default-Text/Muted */
  --default: var(--hk-grey);

  /* Rundungen (Projektvorgabe) */
  --border-radius: 1.5rem;    /* 24px */
  --border-radius2x: 3rem;    /* 48px */

  /* Bootstrap-Radius sauber mitziehen */
  --bs-border-radius: var(--border-radius);
  --bs-border-radius-sm: 1rem;
  --bs-border-radius-lg: var(--border-radius2x);
  --bs-border-radius-xl: var(--border-radius2x);
  --bs-border-radius-xxl: var(--border-radius2x);

  /* Typografie (Projektvorgabe) */
  --hk-font-serif: "Droid-Serif","Times",serif;
  --hk-font-sans: "source_sans_proregular","Source Sans Pro","Segoe UI",system-ui, Arial,sans-serif;
  --hk-font-sans-sb: "source_sans_prosemibold","Source Sans Pro","Segoe UI",system-ui, Arial,sans-serif;
  --hk-font-sans-b: "source_sans_probold","Source Sans Pro","Segoe UI",system-ui, Arial,sans-serif;

  /* Lesbarkeit */
  --hk-text: var(--hk-black);
  --hk-bg: #ffffff;
}

/* =========================================================
   2) Basis: Typografie, Farben, Links
========================================================= */
html{
  /* Sanfte, aber stabile Skalierung (nur global, ohne Sprung-MQs) */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: var(--hk-font-serif) !important;
  font-size: clamp(1rem, 0.965rem + 0.18vw, 1.05rem);
  line-height: 1.6;
  color: var(--hk-text);
  background: var(--hk-bg);
}

/* Headings: Serif */
h1,h2,h3,h4,h5,h6,
.heading,
.font-sans{
  font-family: var(--hk-font-sans-b) !important;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);   /* 28px → 38px */
  line-height: clamp(2.1rem, 1.8rem + 1vw, 2.75rem);     /* 34px → 44px */
  margin: 0 0 clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem) 0; /* 12px → 20px */
}

h2{
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);   /* 20px → 28px */
  line-height: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);    /* 26px → 34px */
  margin: 0 0 clamp(0.6rem, 0.5rem + 0.5vw, 1rem) 0;
}

h3{
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);     /* 18px → 24px */
  line-height: clamp(1.45rem, 1.3rem + 0.6vw, 1.9rem);   /* 23px → 30px */
  margin: 0 0 clamp(0.55rem, 0.45rem + 0.45vw, 0.9rem) 0;
}

h4{
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);       /* 16px → 20px */
  line-height: clamp(1.35rem, 1.2rem + 0.4vw, 1.7rem);   /* 22px → 27px */
  margin: 0 0 clamp(0.5rem, 0.4rem + 0.4vw, 0.8rem) 0;
}

h5{
  font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.1rem);    /* 15px → 18px */
  line-height: clamp(1.3rem, 1.15rem + 0.3vw, 1.5rem);   /* 21px → 24px */
  margin: 0 0 clamp(0.45rem, 0.35rem + 0.3vw, 0.7rem) 0;
}

h6{
  font-size: clamp(0.9rem, 0.8rem + 0.2vw, 1rem);        /* 14px → 16px */
  line-height: clamp(1.25rem, 1.1rem + 0.2vw, 1.4rem);   /* 20px → 22px */
  margin: 0 0 clamp(0.4rem, 0.3rem + 0.25vw, 0.6rem) 0;
}

p, li{
  color: var(--hk-text);
}

/* Muted/secondary text */
.text-muted,
.text-color-default,
.text-color-light{
  color: var(--default) !important;
}

/* Links */
a{
  color: var(--primary);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.14em;
}
a:hover,
a:focus{
  color: var(--secondary);
}

/* =========================================================
   3) Rundungen global konsistent
========================================================= */
.rounded,
.btn,
.form-control,
.form-select,
.card,
.dropdown-menu,
.modal-content,
.alert,
.badge{
  border-radius: var(--border-radius);
}

.rounded-lg,
.card-rounded-lg{
  border-radius: var(--border-radius2x);
}

/* =========================================================
   4) Buttons: Porto/Bootstrap konsistent auf Tokens
========================================================= */
.btn{
  padding-block: clamp(0.65rem, 0.6rem + 0.15vw, 0.85rem);
  padding-inline: clamp(1rem, 0.9rem + 0.3vw, 1.35rem);
  font-family: var(--hk-font-sans);
  font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.04rem;
}

.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--secondary);
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
}

.btn-secondary{
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}

/* =========================================================
   5) Formulare: Fokus sichtbar, barrierefrei
========================================================= */
:focus-visible{
  outline: 0.2rem solid rgba(24,57,108,0.35);
  outline-offset: 0.2rem;
}

.form-control:focus,
.form-select:focus,
.btn:focus{
  box-shadow: 0 0 0 0.25rem rgba(24,57,108,0.18);
  border-color: rgba(24,57,108,0.35);
}

/* =========================================================
   6) Haus-Karin Utilities (optional nutzbar)
========================================================= */
.hk-text-blue{ color: var(--hk-blue) !important; }
.hk-text-green{ color: var(--hk-green) !important; }
.hk-text-red{ color: var(--hk-red) !important; }
.hk-text-gold{ color: var(--hk-gold) !important; }
.hk-text-grey{ color: var(--hk-grey) !important; }
.hk-text-black{ color: var(--hk-black) !important; }

.hk-bg-lightyellow{ background: var(--hk-lightyellow) !important; }
.hk-bg-orange{ background: var(--hk-orange) !important; }

/* =========================================================
   7) Kleine Porto-sichere Korrekturen (global, defensiv)
========================================================= */
/* Verhindert Layout-Jumps bei Scrollbar (falls gewünscht) */
html{ scrollbar-gutter: stable; }

/* Bilder responsiv und ohne Layout-Shift (sofern width/height gesetzt) */
img{ max-width: 100%; height: auto; }