/* ==========================================================================
   PROJEKT: KDK Reisen
   DATEI:   style.css
   WEB:     reisen.kdk.de
   ========================================================================== */

/* ==========================================================================
   GLOBALE VARIABLEN
   ========================================================================== */

:root {
  --page-max-width: 1200px;
  --bg-page: #ffffff; --bg-content: #ffffff;
  --text-color: #50525a; --text-dark: #45474e; --link-color: #006fc9; --line-color: #dddddd;
  --font-main: Arial, Helvetica, sans-serif;
  --header-height: 120px;
}

/* ==========================================================================
   RESET / BASIS
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--text-color); font-family: var(--font-main); font-size: 16px; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 { margin-top: 0; color: var(--text-dark); font-family: var(--font-main); font-weight: 700; }
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 14px; }
p { margin: 0 0 16px 0; }

.text10 { font-size: 10px; }
.text11 { font-size: 11px; }
.text12 { font-size: 12px; }
.text13 { font-size: 13px; }
.text14 { font-size: 14px; }
.text15 { font-size: 15px; }
.text16 { font-size: 16px; }
.text17 { font-size: 17px; }
.text18 { font-size: 18px; }
.text19 { font-size: 19px; }
.text20 { font-size: 20px; }
.text21 { font-size: 21px; }
.text22 { font-size: 22px; }
.text23 { font-size: 23px; }
.text24 { font-size: 24px; }
.text25 { font-size: 25px; }
.text26 { font-size: 26px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.header { width: 100%; background: #ffffff; border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); }

.header-inner {
  width: 100%; max-width: var(--page-max-width); min-height: var(--header-height); margin: 0 auto; padding: 15px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.logo-area { flex: 0 0 auto; }
.logo-area img { width: 190px; height: auto; }
.logo-subtitle { margin-top: 2px; font-size: 12px; color: #555555; }

/* ==========================================================================
   HAUPTMENÜ
   ========================================================================== */

.mainmenu { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.mainmenu a { color: var(--link-color); font-size: 15px; font-weight: 400; white-space: nowrap; }
.mainmenu a:hover { text-decoration: underline; }

/* ==========================================================================
   HAUPTINHALT
   ========================================================================== */

main { width: 100%; max-width: var(--page-max-width); margin: 0 auto; background: var(--bg-content); }

/* ==========================================================================
   EINLEITUNG / REISEBERATUNG
   ========================================================================== */

.intro { padding: 0 30px 25px 30px; text-align: center; }
.intro h1 { margin: 0 0 22px 0; }
.intro-line { margin-bottom: 16px; }
.beratung-title { margin: 0 0 20px 0; font-size: 28px; font-weight: 700; letter-spacing: 5px; }
.beratung-text { font-weight: 700; }
.beratung-text p { margin-bottom: 25px; }
.kosten-hinweis { margin: 0; font-size: 17px; font-style: italic; }

/* ==========================================================================
   REISEBEREICHE
   ========================================================================== */

.reisebereiche { width: 100%; border-top: 1px solid var(--line-color); display: grid; grid-template-columns: repeat(4, 1fr); }

.reise-kachel {
  min-width: 0; padding: 10px 40px; border-right: 1px solid var(--line-color);
  display: flex; align-items: center; justify-content: center;
}

.reise-kachel:last-child { border-right: 0; }
.reise-kachel img { width: 100%; max-width: 240px; height: auto; }
.reise-kachel:hover { text-decoration: none; }

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {
  .header-inner { flex-direction: column; align-items: center; gap: 15px; }
  .logo-area { text-align: center; }
  .logo-area img { margin: 0 auto; }
  .mainmenu { justify-content: center; flex-wrap: wrap; gap: 12px 24px; }
  .beratung-title { font-size: 23px; letter-spacing: 3px; }
  .reisebereiche { grid-template-columns: repeat(2, 1fr); }
  .reise-kachel:nth-child(2) { border-right: 0; }
  .reise-kachel:nth-child(-n+2) { border-bottom: 1px solid var(--line-color); }
}

/* ==========================================================================
   SMARTPHONE
   ========================================================================== */

@media (max-width: 600px) {
  body { font-size: 15px; }
  .header-inner { padding: 12px 15px; }
  .logo-area img { width: 170px; }
  .mainmenu { gap: 8px 16px; }
  .mainmenu a { font-size: 14px; }
  .intro { padding: 15px 15px 25px 15px; }
  .intro h1 { font-size: 20px; }
  .beratung-title { font-size: 19px; letter-spacing: 2px; line-height: 1.5; }
  .kosten-hinweis { font-size: 15px; }
  .reisebereiche { grid-template-columns: 1fr; }
  .reise-kachel { padding: 15px 30px; border-right: 0; border-bottom: 1px solid var(--line-color); }
  .reise-kachel:last-child { border-bottom: 0; }
  .reise-kachel img { max-width: 300px; }
}