@charset "UTF-8";

/************************************************************************************
*
* Theme Name: 		  WP Theme für 
* Theme URI:		    https://www.xyz.com
* Description: 		  Website mit WordPress und ACF Block Theme
* Author:			      xyz GmbH 
* Author URI:		    https://www.xyz.com
* Version:			    1.0
* License:          xyz GmbH 
* License URI:      https://www.xyz.com
*
************************************************************************************/

/************************************************************************************
*
* Webfonts
*
************************************************************************************/


:root {

--fs-xs: 0.875rem;      /* 14px */
--fs-sm: 1rem;          /* 16px */
--fs-base: 1.125rem;    /* 18px */
--fs-md: 1.25rem;       /* 20px */
--fs-lg: 1.5rem;        /* 24px */
--fs-xl: 2rem;          /* 32px */
--fs-xxl: 3rem;         /* 48px */
  
--clr-theme-100: #261D07;
--clr-theme-900: #FBE4B3;

--clr-accent-100: #e05a02;

}
  
.layout {
  position: relative;
  overflow: clip;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@supports(padding: max(0px)) {
 
  .layout {
  padding-left: max(0em, env(safe-area-inset-left));
  padding-right: max(0em, env(safe-area-inset-right));
  }

}

/* Globaler Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Basis-Stile für HTML und Body */

html {
  min-height: 100%;
  position: relative;
  scroll-behavior: smooth;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overflow-x: clip;
}

body {
  font-family: 
  -apple-system, 
  BlinkMacSystemFont, 
  "Segoe UI", 
  Roboto, 
  Oxygen-Sans, 
  Ubuntu, 
  Cantarell, 
  "Helvetica Neue", 
  system-ui, 
  sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  line-height: 1.6;
  min-height: 100vh;
  background-color: var(--clr-theme-100);
  color: var(--clr-theme-900);
}

/* Vermeidung von Standard-Margen für Flexibilität */

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  text-wrap: balance; 
  max-inline-size: 60ch;
  overflow-wrap: break-word;
}

p, ul, figcaption {
  font-size: var(--fs-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

p:not([class]) {
  max-width: 80ch;
}

/* Links und Button-Stile */

a {
  outline: none;
  text-decoration: none;
  cursor: pointer;
  color: currentColor;
}

a:hover,
a:focus-visible {
  color: var(--clr-accent-400);
}

/* Standard Schriftarten für Formulare */
input, button, textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

/* Bild, Video und Medien */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-style: italic;
  border: 0;
  image-rendering: -webkit-optimize-contrast;
}

/* Scroll Margin für ankerbasierte Navigation */
:target {
  scroll-margin-block: 1em;
}
  
:where(h1, h2, h3) > a {
  color: currentColor;
  
  &:hover,
  &:focus-visible {
    color: var(--clr-accent-200); 
    text-decoration: underline;
    }
}

:where(ul, ol)[role="list"] {
	list-style: none;
}

:where(ul, ol) {
    list-style: none;
    padding: 0;
    margin: 0;
}

.layout-wrapper {
  position: relative;
 --max-width: 60rem;
 --container-spacing-inline: 1rem;
  margin-inline: auto;
  width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
}

.placeholder {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 2em;
}

.placeholder > * {
  margin-block-end: 1rem;
}

.placeholder__logo img {
  width: 260px;
  height: 260px;
  display: block;
}

.placeholder__content > * {
  margin-block-end: 1rem;
}

.placeholder__content h1 span {
  display: block;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #837C34;
}

.placeholder__content h1 {
  font-size: var(--fs-xxl);
}