/*
Theme Name: borkotheme Standard
Author: borkograph
Author URI: https://borkograph.de/
Description: Das borkotheme!
Version: 1.0.9
*/

:root {

  /* Spacing (Abstände) - wird im Customizer überschrieben */
  --space: 15px;

  /* Container - wird im Customizer überschrieben  */
  --container-width: 1100px;

  /* Menü Höhe - wird im Customizer überschrieben  */
  --menu-height: 80px;

  /* Font Sizes - wird im Customizer überschrieben */
  --font-size-text: 14px;
  --font-size-title: 20px;

  /* Colors - wird im Customizer überschrieben */
  --color-primary: #181f32;
  --color-secondary: #eee;
  --color-text: #181f32;
  --color-background: #eee;


  /* Font Family */
  --font-family-text: 'Roboto';
  --font-family-title: 'Roboto';

  /* Font Weights */
  --font-thin: 200;
  --font-normal: 400;
  --font-bold: 700;

  /* Border */
  --border: 1px solid var(--color-primary);

  /* Animation */
  --animation: 0.3s ease-in-out
}


body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-text), sans serif;
  font-size: var(--font-size-text);
  font-weight: var(--font-normal);
  background-color: var(--color-background);
  color: var(--color-text);
  overflow-x: hidden;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  word-break: break-word;
}

main {
  flex: 1;
  padding: var(--space) !important;
  width: 100%;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space);
}

h1 {
  font-size: var(--font-size-title);
  font-weight: var(--font-bold);
}

h2 {
  font-size: calc(var(--font-size-title) - 2px);
  font-weight: var(--font-bold);
}

h3 {
  font-size: calc(var(--font-size-title) - 4px);
  font-weight: var(--font-bold);
}

h4 {
  font-size: var(--font-size-text);
  font-weight: var(--font-bold);
}

main h1,
main h2,
main h3,
main h4,
main p,
main img {
  margin-bottom: var(--space);
}

.bold {
  font-weight: var(--font-bold);
}

a {
  opacity: 1;
  transition: opacity var(--animation);
}

main a {
  font-weight: var(--font-bold);
}

a:hover {
  opacity: 0.6;
}

/* BUTTON + SUBMIT (einheitliches UI-Element) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: calc(var(--space) * 0.75) var(--space);
  min-width: 120px;

  background-color: var(--color-primary);
  color: var(--color-secondary);

  text-decoration: none;
  font-weight: var(--font-bold);

  border: var(--border);
  border-radius: 5px;

  cursor: pointer;
  transition: all var(--animation);
}

/* Hover (einheitlich) */
.button:hover {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.8;
}

/* Fokus (Accessibility) */
.button:focus-visible {
  outline: var(--border);
  outline-offset: 2px;
}



@media (max-width: 768px) {
  .button {
    width: 100%;
    min-width: unset;
  }
}