/*
Theme Name: DateBook Theme Child
Description: DateBook is a professional dating WordPress theme for creating online matchmaking business.
Theme URI: https://demo1.pagickthemes.com
Author: Pagick Themes
Author URI: https://www.pagickthemes.com
Version: 4.9.2
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: datebook-theme
Text Domain: datebook-theme
Domain Path: /languages
Tags: left-sidebar, custom-menu, custom-logo, editor-style, footer-widgets, post-formats, theme-options, translation-ready
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Nunito';
  src: url('/wp-content/themes/datebook-theme-child/fonts/nunito/Nunito-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
  font-weight: 300 900;
}

@font-face {
  font-family: 'Nunito';
  src: url('/wp-content/themes/datebook-theme-child/fonts/nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
  font-style: italic;
  font-weight: 300 900;
}

.editor-styles-wrapper {
  font-family: 'Nunito', sans-serif;
}

/* ---------- Farbvariablen ---------- */
:root {
  --kenntihr-rot: #d33d3f;
  --kenntihr-weinrot: #b3282d;
  --kenntihr-gold: #b59a6b;
  --kenntihr-text: #444;
  --kenntihr-bg: #fffdfb;
}

/* ---------- Willkommen / Hintergrund ---------- */
.datebook-front-container .datebook-welcome-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  left: 0;
  right: 0;
  max-width: none;
}

.datebook-welcome-image {
  display: block;
  min-height: 930px;
  position: relative;
}

/* ---------- Starttext-Box ---------- */
.kenntihr-starttext {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  font-family: 'Segoe UI', sans-serif;
  color: var(--kenntihr-text);
}

.kenntihr-starttext h2 {
  color: var(--kenntihr-weinrot);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.kenntihr-starttext h3 {
  color: var(--kenntihr-rot);
  font-size: 1.4rem;
  margin-top: 2rem;
}

.kenntihr-starttext p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.kenntihr-starttext hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid #eee;
}

.kenntihr-starttext em {
  color: var(--kenntihr-gold);
  font-style: italic;
}

.kenntihr-starttext strong {
  color: var(--kenntihr-weinrot);
}

/* ---------- CTA-Button auf Startseite ---------- */
body.home .kenntihr-cta-button {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  background: var(--kenntihr-rot);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

/* ---------- CTA-Button Link selbst ---------- */
.kenntihr-cta-button a {
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
}

/* ---------- CTA-Button Hover ---------- */
.kenntihr-cta-button:hover {
  background: var(--kenntihr-weinrot);
}

/* ---------- CTA-Link-Button Style ---------- */
.cta-btn {
  background-color: var(--kenntihr-weinrot);
  color: #fff;
  padding: 14px 28px;
  font-size: 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.cta-btn:hover {
  background-color: #a31f25;
  color: #fff;
}

/* ---------- Sektion mit Button im Text ---------- */
.kenntihr-cta-button-section {
  text-align: center;
  margin-top: 2rem;
}

/* ---------- Responsive Anpassungen ---------- */
@media (max-width: 768px) {
  .kenntihr-starttext {
    padding: 1.5rem;
  }

  .kenntihr-starttext h2 {
    font-size: 1.6rem;
  }

  .kenntihr-starttext h3 {
    font-size: 1.2rem;
  }

  .kenntihr-starttext p {
    font-size: 1rem;
  }

  body.home .kenntihr-cta-button {
    top: 10%;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .kenntihr-starttext h2 {
    font-size: 1.4rem;
  }

  .kenntihr-starttext h3 {
    font-size: 1.1rem;
  }

  .kenntihr-starttext p {
    font-size: 0.95rem;
  }
}